Как сделать слайдер справа-налево с блоком (слайдом) слева slick slider?

Question

Есть слайдер с двумя слайдами, должно было быть так, что с первого слайда идет прокрутка ко второму слайду справа-налево, как на макете

У меня получается, что идет прокрутка ко второму слайду справа-налево(благодаря rtl), НО мне нужно чтобы второй слайд был слева относительно первого слайда, и "свайп" производился справа-налево ко второму слайду: Мой код на codepen

$(document).ready(function() {
  $(".slider").slick({
  infinite: false,
  rtl: true
  });
})

Конфиг слайдера

Answer 1

Я добавил только width: 500px; и убрал с конфигурации rtl: true. Не вижу в чем проблема. Вроде работает как нужно.

$(document).ready(function() {
  $(".slider").slick({
  infinite: false,

  })
})

.slider {
  background: #333;
  margin: auto;
  padding: 30px;
  text-align: start;
  color: #fff
  width: 500px;
}
.first-slide {
  background: red;
  height: 100%;
}
.second-slide {
  background: blue;
}

<div class="slider">
  <div class="first-slide">
    FIRST SLIDE CONTENT
  </div>
  <div class="second-slide">
    SECOND SLIDE CONTENT
  </div>
</div>
Второй слайд остается справа, а нужно чтобы он был слева<br />
<i>Я не вставил свой код полностью, но структура такая же</i>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

Answer 2

Чтобы обеспечить полноценный эффект "справа-налево" нужно было использовать атрибут dir со значением rtl, вместе с rtl: true

$(document).ready(function() {
  $(".slider").slick({
  infinite: false,
  rtl: true
  })
})

.slider {
  background: #333;
  margin: auto;
  padding: 30px;
  text-align: start;
  color: #fff
  width: 500px;
}
.first-slide {
  background: red;
  height: 100%;
}
.second-slide {
  background: blue;
}

<div class="slider" dir="rtl" <!-- НУЖНО БЫЛО ИСПОЛЬЗОВАТЬ АТРИБУТ dir="rtl" ДЛЯ ПОЛНОЦЕННОГО ИСПОЛЬЗОВАНИЯ rtl: true -->>
  <div class="first-slide">
    FIRST SLIDE CONTENT
  </div>
  <div class="second-slide">
    SECOND SLIDE CONTENT
  </div>
</div>
Второй слайд остается справа, а нужно чтобы он был слева<br />
<i>Я не вставил свой код полностью, но структура такая же</i>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

БЛОГ НА HUSL

Как сделать слайдер справа-налево с блоком (слайдом) слева slick slider?

Ответы (2 шт):