Блог

Я использую slick slider в своем проекте, он работал нормально, пока slidesToShow не стало меньше общего количества слайдов. Но теперь я сталкиваюсь с этой проблемой, когда slidesToShow равно общему количеству слайдов, он даже не отображает слайды должным образом. Вот картинка, как это отображается:

Как вы можете видеть на картинке, слайды по математике даже не отображаются должным образом, хотя в нем всего семь слайдов, а физика отображается правильно, потому что в нем 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
           },

        }]
    });
});
  

Я попытался проверить после функции ready, если общее количество слайдов меньше 7, чем у clone slides, но это не сработало, потому что слайды динамически загружаются через цикл while, когда я получаю длину slick-1 div, он показывает 5, потому что из базы данных поступают данные по 5 темам, поэтому он клонирует слайды по другим темам, которые мне также не нужны.Я даже не могу добавить еще одну главу, потому что в математическом предмете всего 7 глав. Есть ли какой-либо способ, которым я могу добавить один дополнительный слайд-клон только по математическому предмету. Пожалуйста, помогите мне, я буду вам очень благодарен.
Это демонстрационный слайдер Demo Slider

Я понял это сам. Все, что вам нужно сделать, это просто изменить это условие в complete slick.js файл из этого:

  _.slideCount > _.options.slidesToShow 
  

К этому

  _.slideCount >= _.options.slidesToShow 
  

По умолчанию он установлен только для одного сценария, если общее количество слайдов больше, чем слайдов для показа, чем слайды начнут скользить в моем случае, мое общее количество слайдов было равно показываемым слайдам, поэтому оно не скользило, изменив это условие, моя проблема устранена.

К сожалению, это ошибка в Slick. Одним из решений является простое повторение элементов, чтобы было по крайней мере на один больше, чем слайдов. Может быть достигнуто добавлением этого кода перед инициализацией slick:

     let maxSlidesToShow = 7;
    while ($('.slick-1 > div').length <= maxSlidesToShow) {
      $('.slick-1 > div').each(function() {
        $(this).clone().appendTo('.slick-1');
      });
    }
  

Слайды повторяются столько раз, сколько требуется, поэтому всегда есть по крайней мере на один слайд больше, чем показано слайдером.

Я думаю, что лучшее решение — сделать это необязательным:
введите новый параметр по умолчанию

 _.defaults = {
   loopIfEqual: false,
  

затем измените все

 _.slideCount > _.options.slidesToShow
  

Для

 ( (_.slideCount > _.options.slidesToShow) || (loopIfEqual amp;amp; ( _.slideCount == _.options.slidesToShow )) )
  

и при необходимости добавляйте "loopIfEqual": true в свои slick-data.

Я исправил проблему с помощью следующего кода.

 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
        }
      }
    ]
  });