0

Есть задача - сделать вот такой слайдер: Пример слайдера

Выбрал для реализации slick. Вот что получилось

`http://codepen.io/victorAA/pen/eBGrQM.`

Проблема нужно сделать два активных слайда. Сейчас один.

Возможно есть другие решение, кроме slick слайдер, буду рад услышать.

2
  • я не знаю как в самом slick слайдере, но в его реактовском порте есть параметры slidesToScroll, slidesToShow 29 ноя 2016 в 10:58
  • В общем вам сликовского слайдера хватит за глаза, только потрудитесь документацию почитать 29 ноя 2016 в 11:06

1 ответ 1

2

Я вам рекомендую объединить блоки по два в один слайд, чтобы разметка была вот такой:

<div class="slider-wrap">
  <div class="slider">
    <div class="slider__item">
        <img src="http://fillmurray.com/200/200" alt="" />
        <img src="http://fillmurray.com/200/200" alt="" />
    </div>
    <div class="slider__item">
        <img src="http://fillmurray.com/200/200" alt="" />
        <img src="http://fillmurray.com/200/200" alt="" />
    </div>
    <div class="slider__item">
        <img src="http://fillmurray.com/200/200" alt="" />
        <img src="http://fillmurray.com/200/200" alt="" />
    </div>
    <div class="slider__item">
        <img src="http://fillmurray.com/200/200" alt="" />
        <img src="http://fillmurray.com/200/200" alt="" />
    </div>
  </div>
</div>

И не забыть уменьшить количество отображаемых слайдов:

$('.slider').slick({
  slidesToShow: 3,
  centerMode: true
});

Также, не забыть сделать внутренний элемент, например, инлайн-блоком, чтобы не переносился на следующую строку:

.slider__item
  transform: scale(0.8)
  transition: all 0.6s ease

    img 
      display: inline-block
      margin: 0 10px

Полный форк вашего кодпена: http://codepen.io/sandmanisdancing/pen/LbOyPa

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.