Как просматривать несколько слайдов одновременно в слайд-шоу - PullRequest
Новая
       19

Как просматривать несколько слайдов одновременно в слайд-шоу

0 голосов
/ 05 июля 2019

У меня есть слайд-шоу, которое работает нормально.Я просто хочу сделать более одного слайда видимым одновременно.Если бы вы могли помочь мне с этим, это было бы здорово.

Я слышал о свойстве maxSlides, но я не знаю, как реализовать его в этом случае.

Если у вас есть какие-либоидеи, пожалуйста, сообщите мне.Спасибо

Мой код указан ниже: 

<!DOCTYPE html>
<html>
    <head>
        <!-- Slideshow -->
        <style>
.slide-container{
  display: flex;
}
.slide {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  display:none;
}
.active {
  display: inline;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0%;
  width: auto;
  padding: 16px;
  margin: 0 0 !important;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background:transparent;
  border: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

</style>
<script>let slideIndex = 0;
const slideTime = 5000;
let slideInterval = setInterval(() => changeSlide(true), slideTime);

function jumpSlide(forward) {
  clearInterval(slideInterval);
  changeSlide(forward)
  slideInterval = setInterval(() => changeSlide(true), slideTime);
}

function changeSlide(forward) {
  const slides = document.getElementsByClassName('slide');
  slides[slideIndex].classList.remove('active');
  if (forward) {
   if (slideIndex + 1 > slides.length - 1) {
    slides[0].classList.add('active');
    slideIndex = 0;
  } else {
    slides[slideIndex + 1].classList.add('active');
    slideIndex ++;
  } 
  } else {
    if (slideIndex - 1 < 0) {
    slides[slides.length - 1].classList.add('active');
    slideIndex = slides.length - 1;
  } else {
    slides[slideIndex - 1].classList.add('active');
    slideIndex --;
  }
  }
}</script>

    </head>
    <body>
                        <!-- Slideshow -->
                        <div class='slide-container' style="width:100%;">
                            <div class='slide active'>
                                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
                                <div class="text" style="background-color: white">Caption Text 1</div>
                            </div>

                            <div class='slide'>
                                <img src="background-2.gif" style="width:100%">
                                <div class="text" style="background-color: white">Caption Text 2</div>
                            </div>

                            <div class='slide'>
                                <img src="background-1.gif" style="width:100%">
                                <div class="text" style="background-color: white">Caption Text 3</div>
                            </div>  

                            <div class='slide'>
                                <img src="background-3.gif" style="width:100%">
                                <div class="text" style="background-color: white">Caption Text 4</div>
                            </div>

                            <button class="prev" onclick='jumpSlide(false)'>&#10094;</button>
                            <button class="next" onclick='jumpSlide(true)'>&#10095;</button>

                        </div>
    </body>
</html>
...