0

jsfiddle: https://jsfiddle.net/h59nkjoy/5/

let album_images_slider = new Swiper("#album_images_slider", {
  direction: "horizontal",
  allowTouchMove: false,
  speed: 600,
  // autoplay: {
  //     delay: 3000
  // },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

let albums_slider = new Swiper("#albums_slider", {
  direction: "horizontal",
  spaceBetween: 30,
  slidesPerView: 4,
  allowTouchMove: false,
  speed: 600,
  // autoplay: {
  //     delay: 3000
  // },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});
$(function() {
  if (album_images_slider.slides.length < 2) {
    album_images_slider.params.loop = false;
    album_images_slider.update();
    console.log(album_images_slider.params.loop);
  } else {
    album_images_slider.params.loop = true;
    album_images_slider.update();
    console.log(album_images_slider.params.loop);
  }


})
.layer {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background: rgb(36, 36, 36);
  color: #fff;
}

#album_images_slider_scale {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}

#album_images_slider_scale .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgb(55, 55, 55);
  color: #fff;
  border: none;
}

#album_images_slider_scale img {
  width: 100%;
  height: auto;
  margin: 0!important;
  border: none!important;
}

#album_images_slider {
  width: 600px;
  height: auto;
  margin: 0 auto;
}

#album_images_slider .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgb(55, 55, 55);
  color: #fff;
  border: none;
}

#album_images_slider img {
  width: 100%;
  height: auto;
}
<link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" type="text/css">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/album.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="swiper/swiper-bundle.min.js"></script>
<script src="js/swiper_init.js"></script>
<script src="js/album.js" defer></script>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="swiper-container" id="album_images_slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://pbs.twimg.com/media/DtQ5AhzX4AUGQeL.jpg:large">
    </div>
    <div class="swiper-slide">
      <img src="https://dbw4iivs1kce3.cloudfront.net/680x/2013/06/media-image-346120-article-ajust_930.jpg">
    </div>
    <div class="swiper-slide">
      <img src="https://stihi.ru/pics/2019/11/13/5598.jpg">
    </div>


  </div>
  <div class="swiper-navigation">
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

У меня есть слайдер с изображениями (album_images_slider). В одном из своих предыдущих вопросов на русском SO, мне ответили, что для того, чтобы в слайдере не дублировались изображения, когда их меньше, чем значение параметра slidesPerView или когда их количество равно slidesPerView, нужно прописать loop: false.

Поэтому я решил исключить инициализацию параметра loop в слайдере (удалил строку loop: true) из объявления слайдера, и задавать loop: false, если количество слайдов меньше либо равно slidesPerView, а в противном случае задавать loop: true.

Значение loop изменяется, console.log() показывает, что всё в порядке, но при этом почему-то само по себе изменение loop не даёт никакого эффекта.

Из-за того, что loop: true было удалено из объявления слайдера, теперь в слайдере при любом количестве находящихся в нем слайдов отсутствует поведение loop. К тому же почему-то не работает .swiper-button-prev, кнопка почему-то всегда имеет класс disabled.

Как сделать так, чтобы loop изменялся динамически? И как сделать так, чтобы заработал .swiper-button-prev?

UPD: Я попробовал удалять и заново создавать Swiper:

$(function() {
    if (album_images_slider.slides.length < 2) {
        album_images_slider.params.loop = false;
        album_images_slider.update();
        console.log(album_images_slider.params.loop);
    }
    else {
        delete album_images_slider;
        let album_images_slider = new Swiper("#album_images_slider", {
            direction: "horizontal",
            allowTouchMove: false,
            speed: 600,
            loop: true,

            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            }
        });
        console.log(album_images_slider.params.loop);
    }

})

Теперь по какой-то причине заработал .swiper-button-prev, но loop всё не работает, хотя console.log показывает, что loop: true

7
  • Код надо добавлять в вопрос. 8 фев 2021 в 5:59
  • @StepanKasyanenko добавил
    – Coder4Fun
    8 фев 2021 в 6:02
  • Хорошо бы и html добавить. Цель в том, что бы ваш вопрос остался полезен и другим людям в будущем. Для этого непосредственно в вопросе нужен код, который воспроизводит проблему. Ссылки на сторонние ресурсы(фидл) не подходят, потому что вы его можете удалить\изменить\пофиксить и тогда вопрос потеряет ценность. 8 фев 2021 в 6:12
  • @StepanKasyanenko добавил
    – Coder4Fun
    8 фев 2021 в 6:21
  • @StepanKasyanenko добавил в вопрос еще информации о проблеме
    – Coder4Fun
    8 фев 2021 в 6:44

1 ответ 1

0

Может, вам подойдет такое решение. Если количество слайдов больше 2, то включаем loop при инициализации слайдера.

const countSlides = $("#album_images_slider .swiper-slide").length;

let album_images_slider = new Swiper("#album_images_slider", {
  direction: "horizontal",
  allowTouchMove: false,
  loop: countSlides > 2, // если количество слайдов больше 2, то включаем loop 
  speed: 600,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});
.layer {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background: rgb(36, 36, 36);
  color: #fff;
}

#album_images_slider_scale {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}

#album_images_slider_scale .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgb(55, 55, 55);
  color: #fff;
  border: none;
}

#album_images_slider_scale img {
  width: 100%;
  height: auto;
  margin: 0!important;
  border: none!important;
}

#album_images_slider {
  width: 600px;
  height: auto;
  margin: 0 auto;
}

#album_images_slider .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgb(55, 55, 55);
  color: #fff;
  border: none;
}

#album_images_slider img {
  width: 100%;
  height: auto;
}
<link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" type="text/css">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/album.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="swiper/swiper-bundle.min.js"></script>
<script src="js/swiper_init.js"></script>
<script src="js/album.js" defer></script>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="swiper-container" id="album_images_slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://pbs.twimg.com/media/DtQ5AhzX4AUGQeL.jpg:large">
    </div>
    <div class="swiper-slide">
      <img src="https://dbw4iivs1kce3.cloudfront.net/680x/2013/06/media-image-346120-article-ajust_930.jpg">
    </div>
    <div class="swiper-slide">
      <img src="https://stihi.ru/pics/2019/11/13/5598.jpg">
    </div>
  </div>
  <div class="swiper-navigation">
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

<button id="enableLoop">Enable loop</button>
<button id="disableLoop">Disable loop</button>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.