0

такой вопрос. У меня есть слайдер с autoplay, можно ли сделать так, чтобы, когда слайдер прокручивается до последнего элемента - не останавливался, а начинал прокручиваться в обратном направлении до первого елемента слайдера.

JS

$('.slick--js__slider').slick({
  dots: false,
  infinite: false,
    autoplay: true, 
  autoplaySpeed: 5000,
  arrows: false,
  slidesToShow: 3,
slidesToScroll: 3,
  centerMode: false,
  variableWidth: true,
    responsive: [
{
  breakpoint: 1400,
  settings: {
    slidesToShow: 3,
    slidesToScroll: 3,
    variableWidth: true
  }
},
{
  breakpoint: 700,
  settings: {
    slidesToShow: 2,
    slidesToScroll: 2,
      variableWidth: true
  }
},
{
  breakpoint: 414,
  settings: {
    slidesToShow: 1,
    slidesToScroll: 1,
      variableWidth: true
  }
}]      });

HTML

<div class="slick--js__slider"><? $args = array(
      'numberposts' => 10,
      'order' => 'ASC'
    );     
    $latest_posts = get_posts($args);
    foreach ($latest_posts as $key => $row) {
     
      $thumbnail = get_the_post_thumbnail_url($row->ID,'large');
      $get_permalink = get_permalink($row->ID);
     ?>
    <div class="slick--js__box">
        <div class="slick--js__content">
            <div class="slick--js__inside">
                <div class="slick--js__inside__top">
                    <div class="slick--js__imagesContainer">
                        <a class="slick__image__link" href="<? echo $get_permalink; ?>">
                            <span class="slick__img--inside">
                                <span class="slick__Inside--img">
                                  <span class="slick__deoratorOnHover">zobacz</span>
                                      <img src="<? echo $thumbnail; ?>" alt="<? echo $attachments->post_title; ?>">
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="slick-slide-inside-bottom">
                    <a class="slider__link--bottom" href="<? echo $get_permalink; ?>">
                        <div class="slider--js__bottom__title">
                             <? echo $row->post_title; ?>
                        </div>
                        <div class="slider--js__bottom__title__description">
                            <? echo $row->post_excerpt; ?>
                        </div>
                    </a>
                </div>
                
            </div>
        </div>
        
    </div>
<?  } ?></div>

1 ответ 1

0

Свойство infinite: true сделайте.

1
  • Если сделать 'infinite: true' то слайдер станет "циклическиим", то есть будет бесконечным, елементы будут повторяться. А мне нужно, чтобы он дойдя до последнего элемента прокручивался назад Commented 10 дек. 2020 в 14:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.