Элемент гладкого слайдера не центрирован на мобильном устройстве - PullRequest
Новая
       115

Элемент гладкого слайдера не центрирован на мобильном устройстве

0 голосов
/ 12 июля 2020

введите описание изображения здесь

На мобильном устройстве элементы отображаются следующим образом. Однако я хочу, чтобы первый элемент был по центру. В чем проблема?

Отличный код: 

slickOptions() {
    return {
       rows: 0,
       infinite: true,
       slidesToShow: 4,
       slidesToScroll: 4,
       responsive: [
           {
             breakpoint: 1301,
             variableWidth: true,
             settings: {
               slidesToShow: 4,
               slidesToScroll: 4,
               },
             },
             {
               breakpoint: 641,
               variableWidth: true,
               settings: {
                 slidesToShow: 1,
                 slidesToScroll: 1,
                 initialSlide: 1
               },
            },
         ],
     };
},

Я пробовал использовать initialSlide, но он не работает.

Я также пробовал добавить CSS: transform: transform3d(0, 0, 0);, но и это не помогло решить проблему.

1 Ответ

0 голосов
/ 13 июля 2020

Если вы собираетесь использовать variableWidth: true, возможно, вам повезет, добавив centerMode: true. Это должно гарантировать, что ваш текущий слайд находится в центре слайд-шоу.

Кроме того, ваше значение variableWidth должно быть установлено в объекте settings. Обратите внимание: вам нужен этот параметр, только если ваши слайды действительно разной ширины. 

  slickOptions() {
    return {
       rows: 0,
       infinite: true,
       slidesToShow: 4,
       slidesToScroll: 4,
       responsive: [
           {
             breakpoint: 1301,
             settings: {
               slidesToShow: 4,
               slidesToScroll: 4,
               variableWidth: true,
               centerMode: true
               },
             },
             {
               breakpoint: 641,
               settings: {
                 slidesToShow: 1,
                 slidesToScroll: 1,
                 initialSlide: 1,
                 variableWidth: true,
                 centerMode: true
               },
            },
         ],
     };
  },
...