Question

我在项目中使用滑动滑块，直到 slidesToShow 小于总幻灯片之前，它一直运行良好。但是现在当 slidesToShow 等于总幻灯片时，我甚至遇到了这个问题，甚至无法正确显示幻灯片。这是图片的显示方式：

正如您在图片中看到的那样，虽然数学主题幻灯片总共有7张幻灯片，但什至无法正确显示，而物理学却正确显示，因为它有8张幻灯片。我没有什么问题。

这是我的php代码：

 <div class="slick-1"> 
    <?php $data = new WP_QUERY($args);
     $unique_chapter = array();
     while($data->have_posts()):
      $data->the_post();
      $chapter_obj = get_field('chapter');
      $chapter_obj_image = get_field('chapter', false, false);
      if( ! in_array( $chapter_obj, $unique_chapter ) ) :
      $unique_chapter[] = $chapter_obj;
     ?>
     <div class="col-xs-6 col-sm-6 col-md-4 col-lg-12">
     <a id="chapter-link" href="<?php echo get_permalink($post->ID) ?>">
        <div class="sub-slik-img-sty">
           <?php if(!empty($chapter_obj_image))echo get_the_post_thumbnail( 
             $chapter_obj_image, 'full' ); ?></div>
        <div class="text-left chapter_heading">
         <?php  if(!empty($chapter_obj))echo substr($chapter_obj->post_title,0,9) ;?></div>
        <div class="text-left chapter_text">
         <?php  if(!empty($chapter_obj))echo $chapter_obj->post_content ;?> 
    </div>
    </a>
    </div>
    <?php endif; ?>
    <?php endwhile;  ?>
    </div>

那是我的JS代码：

    jQuery(document).ready(function($) {
      $('.slick-1').slick({
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 7,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false,
        responsive: [
        {
          breakpoint: 1200,
          settings: {
            slidesToShow: 7,
            slidesToScroll: 1
          }
        },
            {
          breakpoint: 1024,
          settings: {
            slidesToShow: 6,
            slidesToScroll: 1
          }
        },
            {
          breakpoint: 992,
          settings: {
            slidesToShow: 5,
            slidesToScroll: 1
          }
        },

        {
          breakpoint: 768,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 1
          }
        },

        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
           breakpoint: 400,
           settings: {
              arrows: false,
              slidesToShow: 2,
              slidesToScroll: 1
           },

        }]
    });
});

我尝试使用就绪功能后是否检查的总幻灯片数少于克隆幻灯片的总数，但少于7张，但是却无法正常工作，因为当我得到 slick-1 的长度时，幻灯片会通过while循环动态加载> div它显示5，因为有5个来自db的主题数据，所以它也克隆了我不需要的其他主题的幻灯片。我什至无法添加另一章，因为数学主题只有7章。有什么方法可以仅在数学学科中添加一个额外的幻灯片克隆。请帮助我，我将非常感谢您。就是演示滑块Demo Slider

Answer 1

我自己弄清楚了。您要做的就是从以下位置在完整的slick.js文件中更改此条件：

 _.slideCount > _.options.slidesToShow

对此

 _.slideCount >= _.options.slidesToShow

默认情况下，仅在一种情况下设置以下情况：如果幻灯片总数大于要显示的幻灯片，而在我这种情况下，幻灯片总数等于要显示的幻灯片，则幻灯片将开始滑动，因此通过更改此条件它不会滑动我的问题解决了。

Answer 2

我认为更好的解决方案是将该选项设为可选：
将默认值放入新参数

_.defaults = {
   loopIfEqual: false,

然后全部更改

_.slideCount > _.options.slidesToShow

到

( (_.slideCount > _.options.slidesToShow) || (loopIfEqual && ( _.slideCount == _.options.slidesToShow )) )

并根据需要将"loopIfEqual": true添加到滑行数据中。

Answer 3

我已通过以下代码解决了该问题。

var totalSlides = $('.view-id-faculty_carousel.view-display-id-block_1 > .view-content .views-row').length;
  // Faculty Carousel
  $('.view-id-faculty_carousel.view-display-id-block_1 > .view-content').slick({
    infinite: true,
    slidesToShow: totalSlides >= 4 ? 4 : totalSlides,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 991,
        settings: {
          slidesToShow: totalSlides >= 3 ? 3 : totalSlides,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: totalSlides >= 2 ? 2 : totalSlides,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

如果slidesToShow等于幻灯片总数，光滑的滑块不会加载幻灯片吗？

3 个答案: