@Alex_87

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

Здравствуйте! Не срабатывает скрипт по смене направления в движения картинок в слайдере. Идея такова, что после 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%;
    }
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
inkShio
@inkShio
Предположу, что тебе надо реиницировать слайдер с новым параметром.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы