HTML / CSS Полноэкранные изображения карусели

Question

Последние пару дней застрял. Я пытаюсь создать ползунок полноэкранного изображения, работающий в фоновом режиме веб-страницы, который включает в себя наложение панели навигации в верхней части страницы.

HTML:

      <div class="carousel-container">
        <i class="fas fa-arrow-left" id="prevButton"></i>
        <i class="fas fa-arrow-right" id="nextButton"></i> 

        <div id="nav-bar">      
          <nav>
            <ul>
             <li class="current"><a href="index.html">Home</a></li>
             <li><a href="location.html">Location</a></li>
             <li><a href="contact.html">Contact</a></li>
             <li><a href="accomodation.html">Accomodation</a></li>
             <li><a href="rates.html">Rates</a></li>
             <li><a href="gallery.html">Gallery</a></li>
             <li><a href="enquire.html">Enquire</a></li>                        
            </ul>
          </nav>
        </div>

        <div class="carousel-slide">
            <img src="./img/paintlive4.jpg" style="width:100%;" id="lastClone" alt="Living room and fireplace4">
            <img src="./img/paintlive1.png" style="width:100%" alt="Living room and fireplace1">
            <img src="./img/living2.JPG" style="width:100%" alt="Living room and fireplace2">
            <img src="./img/living3.JPG" style="width:100%" alt="Living room and fireplace3">
            <img src="./img/paintlive4.jpg" style="width:100%" id="firstClone" alt="Living room and fireplace4">
          </div>     
      </div>

CSS:

.carousel-container {

    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-size: cover;

}

.carousel-slide img{

    height: 700px;
    width: 160%;
    background-position: center;
    background-size: cover;
}

 .carousel-slide{

    display: flex;
    width: 100%;
    height: 490px;
}

как видите, я дал все, что мог придумать "ширина: 100%" однако размер изображений в моей карусели остается лишь частью экрана.

Я доволен своей навигационной панелью, она будет иметь некоторую непрозрачность, чтобы изображения можно было видеть через навигационную панель.

Мне удалось заставить работать карусель (с кнопками и JavaScript), однако мне нужно будет изменить ее, как только размеры изображения также изменились. Мы будем очень благодарны за любую помощь в создании этих изображений в полноэкранном режиме, спасибо !!

PS Извините, если плохое форматирование, я новичок ie программист:)

Answer 1

Есть несколько способов создать карусель, и, похоже, вы здесь перепутали некоторые техники. Например, в контейнере установлены размер и положение фона, но вы не устанавливаете фоновое изображение. Хороший совет - по возможности избегайте встроенных стилей, чтобы все ваши стили были в одном месте, и их было легко просматривать и изменять (удалите style = "width: 100%" из HTML и поместите его в файл CSS ). Выньте также навигацию из контейнера карусели - это не должно быть частью карусели.

Если вы хотите go по гибкому маршруту, попробуйте следующее:

#carousel-slide {
   width: 100vw;
   overflow: hidden;
   display: flex;
   align-content: stretch;
}

#carousel-slide img{
   width: 100vw;
   height: auto;
   flex-shrink: 0;
   margin: auto 0;
}

в зависимости от Размер изображения, размер экрана и внешний вид, который вы хотите, вы можете поиграть с шириной и высотой изображения. Если он выглядит хорошо, вы можете использовать JS magi c, чтобы перейти к следующему и предыдущему слайдам. Без написания всего кода это то, что я недавно использовал для подобной задачи ... И снова для этого есть много методов:

//next slide event handler
...
const currentScroll = document.getElementById('carousel-slide').scrollLeft();
const newScroll = currentScroll + window.innerWidth;
//do some cool stuff, or nothing when getting to the end of the slider
document.getElementById('carousel-slide').scrollTo({
        left: newScroll,
        behavior: 'smooth'
    });
...

Answer 2

Это потому, что ваш дисплей гибкий, потому что он делает детей горизонтальными

И удаляет высоту и ширину (необязательно) из контейнера-карусели

Я добавил flex-direction: column Это гибкий, но не горизонтальный

.carousel-container {


background-position: center;
background-size: cover;
}

.carousel-slide img{

height: 700px;
width: 160%;
background-position: center;
background-size: cover;
}

.carousel-slide{

display: flex;
 flex-direction: column;
width: 100%;
height: 490px;
}

      <div class="carousel-container">
        <i class="fas fa-arrow-left" id="prevButton"></i>
        <i class="fas fa-arrow-right" id="nextButton"></i> 

        <div id="nav-bar">      
          <nav>
            <ul>
             <li class="current"><a href="index.html">Home</a></li>
             <li><a href="location.html">Location</a></li>
             <li><a href="contact.html">Contact</a></li>
             <li><a href="accomodation.html">Accomodation</a></li>
             <li><a href="rates.html">Rates</a></li>
             <li><a href="gallery.html">Gallery</a></li>
             <li><a href="enquire.html">Enquire</a></li>                        
            </ul>
          </nav>
        </div>

        <div class="carousel-slide">
            <img src="https://picsum.photos/200/300" style="width:100%;" id="lastClone" alt="Living room and fireplace4">
            <img src="https://picsum.photos/200/300" style="width:100%" alt="Living room and fireplace1">
            <img src="https://picsum.photos/200/300" style="width:100%" alt="Living room and fireplace2">
            <img src="https://picsum.photos/200/300" style="width:100%" alt="Living room and fireplace3">
            <img src="https://picsum.photos/200/300" style="width:100%" id="firstClone" alt="Living room and fireplace4">
          </div>     
      </div>