Почему slick слайдер не хочет становиться по центру и растягивает блоки при указанной ширине?
Выглядит это вот так.
CSS
.team { padding-top: 100px; padding-bottom: 163px; background: linear-gradient(0deg, #FAFAFA, #FAFAFA), #FAE6F5; } .team__inner { text-align: center; margin-bottom: 50px; } .team__subtitle { margin-bottom: 10px; } .slick-slide { border-radius: 0px 0px 15px 15px; margin-right: 30px; } .team__block-info { padding-left: 45px; padding-bottom: 50px; background-color: #fff; } .team__block-title { margin-bottom: 8px; } .name { padding-top: 50px; margin-bottom: 25px; color: #000000; } .name-title { font-size: 24px; line-height: 28px; color: #000; } .expiriens__item { display: flex; align-items: center; margin-bottom: 20px; } .expiriens__item:last-child { margin-bottom: 0px; } .expiriens__item-img { margin-right: 12px; } .slick-next__img { padding-left: 15px; } .slick-list { overflow: hidden; } /* Лента слайдов */ .slick-track { display: flex; } /* Слайд */ .slick-slide { -webkit-backface-visibility:hidden } /* Слайд активный (показывается) */ .slick-slide.slick-active {} /* Слайд основной */ .slick-slide.slick-current {} /* Слайд по центру */ .slick-slide.slick-center {} /* Клонированный слайд */ .slick-slide.slick-cloned {} /* Стрелка */ .slick-arrow { display: flex; align-items: center; position: absolute; z-index: 6; bottom: -68px; right: 20px; background-color: transparent; border: none; cursor: pointer; } .slick-arrow>img { padding-left: 15px; } /* Стрелка влево */ .slick-arrow.slick-prev { right: 13%; font-weight: 500; font-size: 16px; line-height: 19px; } /* Стрелка вправо */ .slick-arrow.slick-next { font-weight: 500; font-size: 16px; line-height: 19px; color: #96317D; } /* Стрелка не активная */ .slick-arrow.slick-disabled {} /* Точки (булиты) */ .slick-dots { display: flex; align-items: center; justify-content: start; position: absolute; bottom: -70px; left: 5px; } .slick-dots li { width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 2px solid transparent; } /* Активная точка */ .slick-dots li.slick-active { border: 2px solid #96317D; border-radius: 100%; } /* Элемент точки */ .slick-dots li button { font-size: 0; width: 8px; height: 8px; background-image: url(../images/dot.svg); background-repeat: no-repeat; background-position: center center; background-color: transparent; border: none; border-radius: 50%; padding: 0; outline: none; cursor: pointer; } |
.team { padding-top: 100px; padding-bottom: 163px; background: linear-gradient(0deg, #FAFAFA, #FAFAFA), #FAE6F5; } .team__inner { text-align: center; margin-bottom: 50px; } .team__subtitle { margin-bottom: 10px; } .slick-slide { border-radius: 0px 0px 15px 15px; margin-right: 30px; } .team__block-info { padding-left: 45px; padding-bottom: 50px; background-color: #fff; } .team__block-title { margin-bottom: 8px; } .name { padding-top: 50px; margin-bottom: 25px; color: #000000; } .name-title { font-size: 24px; line-height: 28px; color: #000; } .expiriens__item { display: flex; align-items: center; margin-bottom: 20px; } .expiriens__item:last-child { margin-bottom: 0px; } .expiriens__item-img { margin-right: 12px; } .slick-next__img { padding-left: 15px; } .slick-list { overflow: hidden; } /* Лента слайдов */ .slick-track { display: flex; } /* Слайд */ .slick-slide { -webkit-backface-visibility:hidden } /* Слайд активный (показывается) */ .slick-slide.slick-active {} /* Слайд основной */ .slick-slide.slick-current {} /* Слайд по центру */ .slick-slide.slick-center {} /* Клонированный слайд */ .slick-slide.slick-cloned {} /* Стрелка */ .slick-arrow { display: flex; align-items: center; position: absolute; z-index: 6; bottom: -68px; right: 20px; background-color: transparent; border: none; cursor: pointer; } .slick-arrow>img { padding-left: 15px; } /* Стрелка влево */ .slick-arrow.slick-prev { right: 13%; font-weight: 500; font-size: 16px; line-height: 19px; } /* Стрелка вправо */ .slick-arrow.slick-next { font-weight: 500; font-size: 16px; line-height: 19px; color: #96317D; } /* Стрелка не активная */ .slick-arrow.slick-disabled {} /* Точки (булиты) */ .slick-dots { display: flex; align-items: center; justify-content: start; position: absolute; bottom: -70px; left: 5px; } .slick-dots li { width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 2px solid transparent; } /* Активная точка */ .slick-dots li.slick-active { border: 2px solid #96317D; border-radius: 100%; } /* Элемент точки */ .slick-dots li button { font-size: 0; width: 8px; height: 8px; background-image: url(../images/dot.svg); background-repeat: no-repeat; background-position: center center; background-color: transparent; border: none; border-radius: 50%; padding: 0; outline: none; cursor: pointer; }
JS
$(document).ready(function () { $('.slider').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3, dots: true, prevArrow: "<button type='button' class='slick-prev slick-arrow'>Назад</button>", nextArrow: "<button type='button' class='slick-next slick-arrow'>Далее<img src='images/Arrow-purp.svg' alt=''></button>", responsive: [ { breakpoint: 1250, settings: { slidesToShow: 2, slidesToScroll: 2, } } ] }); $('.slider__two').slick({ infinite: true, slidesToShow: 2, slidesToScroll: 2, dots: true, prevArrow: "<button type='button' class='slick-prev slick-arrow'>Назад</button>", nextArrow: "<button type='button' class='slick-next slick-arrow'>Далее<img src='images/Arrow-purp.svg' alt=''></button>", }); |
$(document).ready(function () { $('.slider').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3, dots: true, prevArrow: "<button type='button' class='slick-prev slick-arrow'>Назад</button>", nextArrow: "<button type='button' class='slick-next slick-arrow'>Далее<img src='images/Arrow-purp.svg' alt=''></button>", responsive: [ { breakpoint: 1250, settings: { slidesToShow: 2, slidesToScroll: 2, } } ] }); $('.slider__two').slick({ infinite: true, slidesToShow: 2, slidesToScroll: 2, dots: true, prevArrow: "<button type='button' class='slick-prev slick-arrow'>Назад</button>", nextArrow: "<button type='button' class='slick-next slick-arrow'>Далее<img src='images/Arrow-purp.svg' alt=''></button>", });
Дополнительно:
А html разметку можно? Желательно код в codepen условный и ссылку сюда или ссылку на сайт
4. После размещения вопроса пользователю запрещается осуществлять:
4.1. Дублирование вопроса, который уже размещался на страницах Сервиса. В том числе и в случае, если вопрос был удалён модератором, или на вопрос не был дан ответ (т.е. категорически запрещается дублирование вопроса с целью повторного привлечения к нему внимания).
https://qna.habr.com/q/1290702
кто-нибудь давно бы поправил.
Где стиль, как на скрине, с шириной? Не хочет становится по центру - задайте margin: 0 auto;. И как понять "и растягивает блоки при указанной ширине"?
snippet
Хотите флексы, используйте swiper.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы Slick slider стал по центру и не растягивал блоки при указанной ширине, нужно правильно настроить параметры и стили слайдера. Вот несколько шагов, которые помогут решить проблему:
1. Убедитесь, что у вас правильно подключены стили и скрипты Slick slider. Убедитесь, что версии стилей и скриптов совместимы между собой.
2. Укажите параметр `centerMode: true` в настройках слайдера. Этот параметр центрирует слайды внутри контейнера.
3. Установите параметр `slidesToShow` на значение, которое не превышает количество видимых слайдов. Например, если вы хотите показать 3 слайда одновременно, установите `slidesToShow: 3`.
4. Укажите параметр `variableWidth: false`, чтобы слайдер не растягивал блоки.
5. Для центрирования слайдера по горизонтали добавьте стили для контейнера слайдера. Например, можно использовать `margin: 0 auto;`.
Пример настроек слайдера на PHP:
$('.your-slider').slick({ centerMode: true, slidesToShow: 3, variableWidth: false });
Если после этих настроек проблема не решится, возможно, есть конфликт с другими стилями на странице. Проверьте CSS правила для слайдера и убедитесь, что они не мешают центрированию и размерам блоков.
Надеюсь, эти шаги помогут вам решить проблему с центрированием и размерами блоков в Slick slider. Если у вас останутся вопросы, не стесняйтесь задавать их.