如果 slidesToShow 等于总幻灯片，Slick 滑块不加载幻灯片？答案

【问题标题】：Slick slider not loading slides if slidesToShow is equal to the total slides?如果 slidesToShow 等于总幻灯片，Slick 滑块不加载幻灯片？
【发布时间】：2019-07-28 23:29:36
【问题描述】：

我在我的项目中使用了光滑的滑块，它工作正常，直到 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

【问题讨论】：

请在codepen上分享完整代码。
@Tushar Kumawat 这里总共有 4 张图片如果您将 slidestoshow 更改为 4 张幻灯片将不会移动，如果将其设置为 3 张幻灯片将移动。这是codepen链接codepen.io/Sameed-Ul-Hassan/pen/xBqwNK
好的，但是你想要什么？
问题是当 slideToShow 等于幻灯片总数时，滑块没有正确加载并且没有滑动我想知道是否有修复它，我可以强制滑块甚至滑动如果 slideToShow 等于幻灯片总数。

标签： php jquery html css

【解决方案1】：

我自己想通了。您所要做的就是在完整的 slick.js 文件中更改此条件：

 _.slideCount > _.options.slidesToShow

到这里

 _.slideCount >= _.options.slidesToShow

默认情况下，如果总幻灯片数大于要显示的幻灯片，则仅针对一种情况设置它，在我的情况下，幻灯片将开始滑动我的问题已经解决了。

【讨论】：

有什么办法不覆盖代码文件来解决问题

【解决方案2】：

我认为更好的解决方案是将其设为可选：
在默认值中添加一个新参数

_.defaults = {
   loopIfEqual: false,

然后全部更改

_.slideCount > _.options.slidesToShow

到

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

并根据需要将 "loopIfEqual": true 添加到您的 slick-data 中。

【讨论】：

【解决方案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
        }
      }
    ]
  });

【讨论】：