Почему криво работает Slick Slider?

105

27 ноября 2021, 20:40

Всем добрейшего дня! Подскажите, гуру, есть слайдер на Slick Slider'е. Есть некоторые огрехи в работе данного слайдера с превью фотографий. У меня сайт состоит из 5 секций, они же 5 страниц меню. То есть каждая секция скрыта , пока не выбран пункт меню. Когда выбираешь фотографии, открывается секция со слайдером. Главный слайд, который должен стоять по середине , смещен в право, инспектор показывает, что у slick-track прописаны два свойства, opacity: 1; width: 0px; Когда делаешь первый слай то все встает на свои места, не могу понять в чем причина, может кто сталкивался, буду признателен за подсказку!

<div class="foto_slider">
    <div><img src="assets/img/1.jpeg" alt=""></div>
    <div><img src="assets/img/2.jpeg" alt=""></div>
    <div><img src="assets/img/3.jpeg" alt=""></div>
    <div><img src="assets/img/4.jpeg" alt=""></div>
    <div><img src="assets/img/5.jpeg" alt=""></div>
    <div><img src="assets/img/6.png" alt=""></div>
    <div><img src="assets/img/7.png" alt=""></div>
</div>
<div class="foto_slider-nav">
    <div><img src="assets/img/1.jpeg" alt=""></div>
    <div><img src="assets/img/2.jpeg" alt=""></div>
    <div><img src="assets/img/3.jpeg" alt=""></div>
    <div><img src="assets/img/4.jpeg" alt=""></div>
    <div><img src="assets/img/5.jpeg" alt=""></div>
    <div><img src="assets/img/6.png" alt=""></div>
    <div><img src="assets/img/7.png" alt=""></div>
</div>
$('.foto_slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  adaptiveHeight: true,
  infinite: false,
  asNavFor: '.foto_slider-nav'
)};
$('.foto_slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.foto_slider',
  focusOnSelect: true,
  centerMode: true,
  infinite: false,
  variableWidth: true
});

Answer 1

UPD2
Самое главное забыл: перезапускать после клика на пункт меню нужно ОБА слайдера - и сам слайдер и слайдер-навигацию. Иначе могут быть сбои в работе. Проверьте этот момент.

UPD
Я попробовал сделать Ваш пример воспроизводимым, и у меня есть подозрение, что проблема не в infinite, а в variableWidth: true и adaptiveHeight: true. С этими параметрами мой пример работает криво, без них всё ок:

$('.foto_slider').slick({ 
  slidesToShow: 1, 
  slidesToScroll: 1, 
  arrows: true, 
  fade: true, 
  asNavFor: '.foto_slider-nav' 
}); 
 
$('.foto_slider-nav').slick({ 
  slidesToShow: 3, 
  slidesToScroll: 1, 
  asNavFor: '.foto_slider', 
  focusOnSelect: true, 
  centerMode: true 
});

.foto_slider { 
  border: 1px solid red; 
} 
.foto_slider-nav { 
  border: 1px solid black; 
} 
.foto_slider img, 
.foto_slider-nav img { 
  padding: 10px; 
  border: 1px solid black; 
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"/> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> 
<div class="foto_slider"> 
  <div><img src="" alt="123"></div> 
  <div><img src="" alt="456"></div> 
  <div><img src="" alt="789"></div> 
  <div><img src="" alt="abc"></div> 
  <div><img src="" alt="def"></div> 
  <div><img src="" alt="igk"></div> 
  <div><img src="" alt="lmn"></div> 
</div> 
<div class="foto_slider-nav"> 
  <div><img src="" alt="123"></div> 
  <div><img src="" alt="456"></div> 
  <div><img src="" alt="789"></div> 
  <div><img src="" alt="abc"></div> 
  <div><img src="" alt="def"></div> 
  <div><img src="" alt="igk"></div> 
  <div><img src="" alt="lmn"></div> 
</div>

Вам нужно перезапустить Ваш слайдер после выбора соответствующего пункта меню:

$('.foto').click(function(){ //кликаем по пункту в меню
    $('.slider').slick('reinit'); //перезапускаем слайдер
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как проходит сравнение объектов в mapStateToProps?

Подскажите пожалуйста, как проходит сравнение объектов в mapStateToProps для определения того, нужно ли перерендерить компонентИнтересует вот...

109

javascript

Создание аккордеона, направить на путь правильный

Есть такая структура в PUG:

275

javascript

Правильное ли решение этой задании таким образом?

Создайте функцию конструктор Calculator, которая создаёт «расширяемые» объекты калькулятораРеализуйте метод calculate(str), который принимает строку...

191

javascript

Confirm с альтернативными ответами в JavaScript

Возможно ли сделать confirm где кнопки будут содержать не 'ОК' и 'Отмена', а другие значения, к примеру 'Да' и 'Нет'?