Почему слик слайдер растягивает блоки?
Cлайдер растягивает блоки таким образом
Нужно чтоб было так
Что может помочь? Почему слик слайдер распределяет блоки таким образом?
CSS
.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; } |
.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; }
Дополнительно:
Потому что slick не умеет работать с флексами (не умел, когда я его трогала последний раз)
Но по скрину похоже, что у вас проблемы с шириной самого слайдера.
Ответы:
Слик здесь ни причем. Он слайды нормально выводит 2х50%.
А вот вы уже внутри слайдов содержимое выводите так как оно сейчас выглядит.
См. картинку для понимания
- Просто уменьшите ширину самого слайдера, чтобы там помещалось ровно два слайда по размерам ваших картинок.
- Сергей delphinpro, когда меняю ширину слайдера происходит следующее.
- Вот код, если поможет.
HTML<section id="team" class="team"> <div class="container"> <div class="team__inner"> <p class="team__subtitle plum"> В нашем штате 37 сотрудников </p> <h2 class="team__title title"> Мы большая команда профессионалов </h2> </div> <div class="slider"> <div class="slick-slide"> <img class="team__block-img" src="images/Man-1.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> <div class="slick-slide"> <img class="team__block-img" src="images/Man-2.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> <div class="slick-slide"> <img class="team__block-img" src="images/Man-3.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> <div class="slick-slide"> <img class="team__block-img" src="images/Man-4.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> <div class="slick-slide"> <img class="team__block-img" src="images/Man-5.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> </section>
<section id="team" class="team"> <div class="container"> <div class="team__inner"> <p class="team__subtitle plum"> В нашем штате 37 сотрудников </p> <h2 class="team__title title"> Мы большая команда профессионалов </h2> </div> <div class="slider"> <div class="slick-slide"> <img class="team__block-img" src="images/Man-1.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> <div class="slick-slide"> <img class="team__block-img" src="images/Man-2.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> <div class="slick-slide"> <img class="team__block-img" src="images/Man-3.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> <div class="slick-slide"> <img class="team__block-img" src="images/Man-4.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> <div class="slick-slide"> <img class="team__block-img" src="images/Man-5.jpg" alt=""> <div class="team__block-info"> <div class="name"> <h3 class="team__block-title name-title"> Александр Федулов </h3> <p class="team__block-text"> Ремонтник </p> </div> <div class="expiriens"> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">398 ремонтных работ</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">3 года в Fixper</p> </div> <div class="expiriens__item"> <img class="expiriens__item-img" src="images/check.svg" alt=""> <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p> </div> </div> </div> </div> </section>
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; }
.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; }
*CSS слайдера в описании вопроса.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы предотвратить растягивание блоков при использовании Slick Slider, вам необходимо установить правильные параметры для слайдера и правильно настроить стили CSS.
Первым шагом является установка параметра `slidesToShow` в настройках Slick Slider. Этот параметр определяет количество слайдов, которые будут отображаться одновременно. Установите его на значение, которое соответствует вашему макету, чтобы избежать растягивания блоков.
Пример кода:
$('.your-slider').slick({ slidesToShow: 3, // Устанавливаем количество отображаемых слайдов slidesToScroll: 1, // Другие настройки слайдера });
Кроме того, убедитесь, что у ваших слайдов заданы фиксированные размеры (например, ширина и высота) с помощью CSS. Это поможет избежать растягивания блоков при переключении слайдов.
Пример CSS:
.your-slider .slick-slide { width: 300px; // Задаем фиксированную ширину слайда height: 200px; // Задаем фиксированную высоту слайда }
Если у вас есть контент внутри слайдов, который может быть растянут из-за изменения размера слайдера, убедитесь, что этот контент также имеет фиксированные размеры или используйте соответствующие CSS свойства (например, `overflow: hidden`) для предотвращения растягивания.
Следуя этим рекомендациям, вы сможете избежать проблемы с растягиванием блоков при использовании Slick Slider на вашем сайте.