Почему не срабатывает скрипт по смене направления в слайдере swiper?

Question

[Alex_87]

Здравствуйте! Не срабатывает скрипт по смене направления в движения картинок в слайдере. Идея такова, что после 3-х кликов, свойство direction должно меняться с 'horizontal' на 'vertical' . Подскажите пожалуйста, что не так?

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

 <div class="swiper-container">
    
    <div class="swiper-wrapper">
      <div class="swiper-slide card"> <img src="images/slide_2.jpg"></div>
      <div class="swiper-slide card"><img src="images/slide_3.jpg"></div>
      
    </div>
    
    <button class="swiper-button-prev" onclick="mySolution()"></button>
    <button class="swiper-button-next" onclick="mySolution()"></button>
  </div>

  <!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

$( document ).ready(function() {
    let isVertical = true;
    
    let direction = 'horizontal';

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      effect: 'cube',
      arrows: 'true',
      grabCursor: true,
      direction: direction,
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
      
     
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
  },
  // autoplay: {
  //    delay: 1000,

  // },
  speed:2000,

  });

function mySolution(){
      let num = 0;
      num++;
    if(num == 2){

      isVertical = !isVertical;
      direction = isVertical ? 'vertical' : 'horizontal';
      num = 0;
    }
    console.log(num);
  }

});

html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .card{
      width: 100%;
    }

Comments

[its2easyy]

возможно стоит всё таки документацию свайпера прочитать https://swiperjs.com/api/#methods

[Alex_87]

its2easyy, подправил код учитывая документацию, но не получилось

$( document ).ready(function() {
   

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      effect: 'cube',
      arrows: 'true',
      grabCursor: true,
      direction: direction,
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
      
     
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
  },
  // autoplay: {
  //    delay: 1000,

  // },
  speed:2000,

  });
});
let num = 0;
// let direction = 'horizontal';
// let isVertical = true;
// let result = mySolution();
//     console.log(result);

function mySolution(){
      
      num++;
    if(num == 2){
       swiper.changeDirection(direction);
      // isVertical = !isVertical;
      // direction = isVertical ? 'vertical' : 'horizontal';
      num = 0;
    }
    
  }

[its2easyy]

Alex_87, что в консоли? значение num правильно меняется если console.log добавить? всё остальное в слайдере правильно работает?

[Alex_87]

its2easyy, посмотрите пожалуйста данный вопрос. Он похож на этот, тоже насчёт swiper, только уже в codepen: Проблемы с slider-cube, библиотеки swiper?

[its2easyy]

Alex_87, у вас какая то дичь, можно просто использовать смену направления swiper.changeDirection(direction); вместо

let slideIndex = swiper.activeIndex;
swiper.destroy(true, true);
swiper = initSwiper(direction);
swiper.slideTo(slideIndex,0);

и оно просто меняет направление без ошибок

Answer 1

[inkShio]

Предположу, что тебе надо реиницировать слайдер с новым параметром.