如果slidesToShow等于幻灯片总数，光滑的滑块不会加载幻灯片吗? [英] Slick slider not loading slides if slidesToShow is equal to the total slides?

问题描述

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

I am using slick slider in my project it was working fine until slidesToShow was less than total slides. But now I am facing this problem when slidesToShow is equal to total slides its not even displaying the slides properly. Here is the picture how it is displaying:

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

As you can see in the picture, math subject slides not even displaying properly while it has a total of seven slides and physics is displaying properly because it has 8 slides. I'm not getting what's the problem.

这是我的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个章节.有什么方法可以仅在数学学科中添加一个额外的幻灯片克隆.请帮助我，我将非常感谢您.多数民众赞成在演示滑块演示滑块

I tried to check after ready function if the total slides are less than 7 than clone slides but it didn't work because slides are dynamically loading through while loop when I get the length of slick-1 div it shows 5 because there are 5 subjects data coming from db so it clone slides in other subjects also which I don't need.I cannot even add another chapter because math subject only has 7 chapters. Is there any way that I can add one extra slide clone in math subject only. Please help me i'll be very thankful to you. Thats the demo slider Demo Slider

推荐答案

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

I have fixed the issue with the following code.

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等于幻灯片总数，光滑的滑块不会加载幻灯片吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！