4

こんにちは、WordPress Web サイトでレスポンシブ スライダーを作成しようとしています。デスクトップ 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', },

})

});
4

1 に答える 1