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>

Halo. Bagaimana saya bisa mengikat kode Javascript ke kueri media di CSS sehingga hanya berfungsi ketika layar mencapai lebar tertentu. Pada awalnya, semua blok disusun dalam satu baris. setelah mengecilkan layar menjadi 768px, saya ingin blok berubah menjadi slide. bagaimana hal itu dapat dilaksanakan. Saya mencoba menambahkan if (windows.innerWidth <= 768) {} ke kode, jadi ketika ukuran ini tercapai, slide hilang sama sekali. Tanpa permintaan tembaga di css dan menambahkan kondisi ke JS, semuanya berfungsi dan ditampilkan sebagai slide.

0
nikitasalnikov 11 Mei 2021, 17:15

1 menjawab

Jawaban Terbaik

Jika Anda menginginkan solusi seperti kueri media untuk javascript, Anda harus mendengarkan acara resize dengan pendengar acara dan memanggil fungsi slide showSlides() di dalamnya. Dalam fungsi slide Anda harus membungkus kode dalam pernyataan if yang meminta window.innerWidth. Selain itu Anda harus menentukan blok lain untuk menampilkan gambar lagi.

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);
});

Contoh kerja (saya mengubah display: block menjadi inline-block untuk menyelaraskan gambar dalam satu baris):

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>
0
biberman 13 Mei 2021, 20:08