0

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

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

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

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

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

2
  • я не знаю как в самом slick слайдере, но в его реактовском порте есть параметры slidesToScroll, slidesToShow Commented 29 нояб. 2016 в 10:58
  • В общем вам сликовского слайдера хватит за глаза, только потрудитесь документацию почитать Commented 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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