swiper js отзывчивые проблемы с шириной браузера - PullRequest
Новая
       21

swiper js отзывчивые проблемы с шириной браузера

0 голосов
/ 09 марта 2020

Привет! Я пытаюсь создать адаптивный слайдер на своем веб-сайте WordPress. Я хочу, чтобы слайдер был на 5 столбцах на рабочем столе, на 4 столбцах на планшете и на 3 мобильных столбцах, и скрыть стрелки на мобильном телефоне, используя css, это мое коды:

, но, кажется, не работает, на любой ширине браузера он по-прежнему отображает 3 столбца, как это исправить? спасибо 

<html>
<!-- start slider -->
<div class="swiper-container">

      <div class="swiper-wrapper">
        <div>slider item</div>
        <div>slider item</div>
        <div>slider item</div>
        <div>slider item</div>
        <div>slider item</div>

  </div>
    <!-- Add Pagination -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
}
</html>

и это мой jquery

jQuery(document).ready(function () {
  //initialize swiper when document ready
  var mySwiper = new Swiper ('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 10,
  breakpoints: {  
    '480': {
      slidesPerView: 4,
      spaceBetween: 40,},
    '@640': {
      slidesPerView: 5,
      spaceBetween: 50, },
  },
    // Optional parameters   
     freeMode: true,
    loop: false,
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,},
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev', },

})

});

1 Ответ

0 голосов
/ 10 марта 2020

Неправильный синтаксис.

Задача 1

Отсутствует swiper-slide класс. https://swiperjs.com/get-started/

Измените это: <div>Slide 1</div> на <div class="swiper-slide">Slide 1</div>

Задача 2

Удалите это @ + одинарные кавычки (Не 480 , но 480 ).

Изменить 

'@640': {
      slidesPerView: 5,
      spaceBetween: 50, },
  },

На: 

640: {
      slidesPerView: 5,
      spaceBetween: 50, },
  },

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

Простой пример: 

 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;
    }
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider item</div>
    <div class="swiper-slide">slider item</div>
    <div class="swiper-slide">slider item</div>
    <div class="swiper-slide">slider item</div>
    <div class="swiper-slide">slider item</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

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

<!-- Initialize Swiper -->
<script>
  //initialize swiper when document ready
  var swiper = new Swiper ('.swiper-container', {
    slidesPerView: 2,
    spaceBetween: 10,
    breakpoints: {
      480: {
        slidesPerView: 4,
        spaceBetween: 40,
      },
      640: {
        slidesPerView: 5,
        spaceBetween: 50,
      }
    },
    // Optional parameters   


  })
</script>

Следуйте этой демонстрации:

https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html

https://stackblitz.com/edit/swiper-demo-37-responsive-breakpoints?file=index.html

...