Как получить слайд-шоу только на мобильном телефоне? - PullRequest
Новая
       6

Как получить слайд-шоу только на мобильном телефоне?

0 голосов
/ 22 ноября 2018

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

Обычная страница: Обычная страница

Страница для мобильного телефона: Страница для мобильного телефона

МожетКто-нибудь мне помочь с этим?

Это скрипт, который я использую: 

<script>
      
        var slideIndex = 1;
        showSlides(slideIndex);
        
        function plusSlides(n) {
          showSlides(slideIndex += n);
        }
        function currentSlide(n) {
          showSlides(slideIndex = n);
        }
        
        function showSlides(n) {
          var i;
          var slides = document.getElementsByClassName("mySlides");
          var dots = document.getElementsByClassName("dot");
          if (n > slides.length) {slideIndex = 1}    
          if (n < 1) {slideIndex = slides.length} 
          for (i = 0; i < slides.length; i++) {
              slides[i].style.display = "none";  
          }
            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";
        }
        </script>

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Опция 1 Использование медиазапросов для отображения скрытия компонента слайдера согласно размеру экрана 

@media only screen and (max-width: 640px) {
  #slider_component {
    display: block;
  }
}
#slider_component {
    display: none;
  }

Опция 2

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

0 голосов
/ 22 ноября 2018

Вы должны добавить идентификатор, если он еще не существует в вашем теге, например, id = "slider" и добавить этот код в свой стиль: 

#slider {
  display: none;
}

@media only screen and (max-width: 768px) {
  #slider {
    display: block;
  }
}

удачи.

...