как сделать так, чтобы мой слайдер имел отзывчивую высоту - PullRequest
Новая
       7

как сделать так, чтобы мой слайдер имел отзывчивую высоту

0 голосов
/ 05 апреля 2020

Привет, ребята, пытались сделать так, чтобы этот слайдер имел адаптивную высоту, чтобы он мог отлично починиться на мобильном телефоне, но не могу получить его, может быть, вы можете мне помочь, вот мои html 

<div class="slideshow-container">

<div class="mySlides fade">

<img src="images/slider3.jpg" style="width:100%">
<div class="text">LET'S CAPTURE YOUR HAPPIEST MOMENTS</div>
</div>

<div class="mySlides fade">

<img src="images/slider4.jpg" style="width:100%">
<div class="text">EXPRESS YOURSELF!</div>
</div>

</div>

<div style="text-align:center">
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span> 
</div>

и css


    .mySlides {display: none;
}
img {vertical-align: middle;
}


/* Slideshow container */
.slideshow-container {
  max-width: 1300px;
  position: relative;
  margin: auto;

}

javascript

    var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

пожалуйста, помогите мне сойти с ума, я попытался отредактировать css, добавив height: auto; mySlides не работает благодаря

1 Ответ

0 голосов
/ 05 апреля 2020

.slideshow-container {width: 50vw; высота: 50vh}

// растяжение vw и vh относительно размера экрана // вы можете установить предел vw и vh в соответствии с вашими потребностями

...