Я хочу разработать веб -галерею изображений с CSS сеткой определенным образом, и я застрял ⇐ Html

[Anonymous]

[*] Я хотел иметь только 6 изображений под основным изображением, но в то же время я хочу иметь более 6 изображений / всего .. 1-я проблема-это всякий раз, когда я добавляю Другое изображение создает новую строку, он не создает его в одном и том же ряду - я хочу иметь только 2 строка, один с основным изображением, и с 6 изображениями (только с шестью изображениями) < /p>

Как у меня есть несколько изображений в этом «ползунке» внизу, без необходимости иметь их все одновременно, кроме как увидеть их постепенно, когда пользователь щелкает через них? Я хочу только 6 изображений в ползунке, но в общей сложности, поэтому, когда пользователь добирается до 6 -го изображения, следующие 6 изображений загружаются, в то время как предыдущие 6 изображений скрываются, и когда он доходит до последнего изображения, чтобы вернуться к первым и наоборот. JS мне нужно пройти через этот сначала). Для меня. < /p>

Код: Выделить всё

html {
font-size: 62.5%;
box-sizing: border-box;
/* font-family: "Montserrat", sans-serif; */
}

body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
background-color: #e9e9e9;
}

figure {
display: block;

margin: 0;
padding: 0;

height: 100%;
width: 100%;
}

.grid {
display: grid;

}

.grid__gallery {
max-width: 100%;

padding: .5rem;

margin-left: 2rem;
margin-right: 2rem;

column-gap: 0.4rem;
row-gap: 0.1rem;

grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;

}

.main__image {
position: relative;
width: 100%;
color: white;
background-color: #444;

height: 50rem;

grid-column: 1 / -1;

/* this will helps changing the photo */
/* by selecting the url of one of the photos under the  main slide and passing it in the background image of this css */
background-image: url("");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.image {
max-width: 100%;
width: 100%;

cursor: pointer;
transition: 0.1s ease;

background-color: #333;
border: 1px solid green;
height: 15rem;
}

.slide:active {
cursor: pointer;
transform: scale(0.995);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.041);
}

.slider-arrow {
font-size: 3rem;
position: absolute;
cursor: pointer;
padding: 1rem;
border-radius: 10%;

transition: 0.3s ease;
border: 0.1rem solid transparent;
outline: none;
}

.slider-arrow:active {
font-size: 2.8rem;
}

.slider-arrow:hover {
border: 0.1rem solid #fff;
}

.left-arrow {
top: 50%;
left: 5%;
transform: translateY(-50%);
}

.right-arrow {
top: 50%;
right: 5%;
transform: translateY(-50%);
}< /code>


←
→

Подробнее здесь: https://stackoverflow.com/questions/794 ... y-and-im-s