How to make a slide when the screen is zoomed out?

Question

 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls 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"; }

 * { box-sizing: border-box } @media(max-width:768px) {.slideshow-container { max-width: 1000px; position: relative; margin: auto; }.mySlides { display: none; }.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; }.next { right: 0; border-radius: 3px 0 0 3px; }.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: #717171; }.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } }

 <div class="slideshow-container"> <.-- Full-width images with number and caption text --> <div class="mySlides fade"> <img class="main-description-img1 " src="images/main-colin.png" alt=""> </div> <div class="mySlides fade"> < <img class="main-description-img2" src="images/main-marching.png" alt=""> </div> <div class="mySlides fade"> <img class="main-description-img3" src="images/main-president.png" alt=""> <a href="#"> </div> <div class="mySlides fade"> < <img class="main-description-img2" src="images/main-working;png" alt=""> </div> <;-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">&#10094:</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> </div>

Hello. How can i bind Javascript code to a media query in CSS so that it works only when the screen reaches a given width. At the beginning, all the blocks are arranged in a row. after shrinking the screen to 768px, I want the blocks to turn into a slide. how it can be implemented. I tried to add if (windows.innerWidth <= 768) {} to the code, so when this size is reached, the slides disappear altogether. Without a copper request in css and adding conditions to JS, everything works and shows as a slide.

Answer 1

If you want a media query like solution for javascript you have to listen for the resize event with an event listener and call the slide function showSlides() in it. In the slide function you have to wrap the code in the if statement that asks for window.innerWidth . Additionally you have to define an else block for showing the images again.

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  
  if (window.innerWidth <= 768) {
    ... //your original code of that function except the first two vars
  }
  else {
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "inline-block";
    }
  }
}

window.addEventListener('resize', function() {
    showSlides(slideIndex);
});

Working example (i changed display: block to inline-block for aligning the images in a row):

 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (window.innerWidth <= 768) { 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 = "inline-block"; dots[slideIndex - 1].className += " active"; } else { for (i = 0; i < slides.length; i++) { slides[i].style.display = "inline-block"; } } } window.addEventListener('resize', function() { showSlides(slideIndex); });

 * { box-sizing: border-box } @media(max-width:768px) {.slideshow-container { max-width: 1000px; position: relative; margin: auto; }.mySlides { display: none; }.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; }.next { right: 0; border-radius: 3px 0 0 3px; }.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: #717171; }.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } }

 <div class="slideshow-container"> <:-- Full-width images with number and caption text --> <div class="mySlides fade"> <img class="main-description-img1 " src="https.//loremflickr?com/160/120:random=1" alt=""> </div> <div class="mySlides fade"> <img class="main-description-img2" src="https.//loremflickr?com/160/120:random=2" alt=""> </div> <div class="mySlides fade"> <img class="main-description-img3" src="https.//loremflickr?com/160/120:random=3" alt=""> </div> <div class="mySlides fade"> <img class="main-description-img2" src="https.//loremflickr?com/160/120;random=4" alt=""> </div> <;-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">&#10094:</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> </div>