Shopify - скользкий слайдер / карусель - адаптивная настройка не работает - PullRequest
Новая
       17

Shopify - скользкий слайдер / карусель - адаптивная настройка не работает

1 голос
/ 27 апреля 2020

Я использую Shopify (тема дебюта), которая поставляется с предварительно установленной версией карусели Slick.

Slick работает, однако адаптивная настройка / функция - нет. Если я использую точный код, который Slick дает в качестве одного из своих примеров для простого примера: 

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

Ни одна из адаптивных функций не работает. Он принимает только начальное значение slidesToShow, равное 2. Если вы удаляете его, то по умолчанию возвращается к гладкому значению по умолчанию, равному 1. Никакое изменение размера / обновление окна не имеет никакого значения, и мой контейнер div - это полная ширина моего DOM / viewport, поэтому на меня не влияет существо в маленьком контейнере, если это уместно.

Я видел, что эту проблему часто спрашивают на разных форумах, но я не могу найти реального решения. Я безуспешно пытался обновить свою версию Slick - но это все еще может быть проблемой, и я, возможно, сделал это неправильно.

Кто-нибудь может посоветовать? Заранее спасибо.

1 Ответ

0 голосов
/ 06 мая 2020

Я сам исправил это, выполнив следующее:

  1. Закомментировал slick.min. js в поставщике. js file
  2. Скачал последний slick (v1. 8.1) https://kenwheeler.github.io/slick/
  3. Создал новый файл в разделе «Активы» под названием «slick. js» и скопировал в него файл slick.min. js, который я только что загрузил.
  4. Добавлено следующее ниже, мой поставщик. js (но над темой. js) скрипты в моей theme.liquid 
<script src="{{ 'slick.js' | asset_url }}" defer="defer"></script>

Тогда сработала адаптивная функция.

...