Блог

Главная - Вопросы по программированию - Как создать карусель в HTML с предыдущими / следующими изображениями, видимыми с левой / правой стороны?

Как создать карусель в HTML с предыдущими / следующими изображениями, видимыми с левой / правой стороны?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Мне интересно, как создать слайдер с изображениями, чтобы предыдущие и следующие были видны по левому / правому краям, в то время как активный всегда центрирован. Я могу показывать предыдущие или следующие слайды, используя margin-left / margin-right с отрицательными значениями, но когда я прокручиваю следующий, он не будет центрирован из-за этого поля.

Должен ли я применять и удалять отрицательные поля с помощью js script? Как это сделать?

Я показываю свою идею с помощью двух простых скриншотов, которые показывают, что происходит при прокрутке вправо, с 1-го слайда на 2-й:

1-й слайд активен

2-й слайд активен

Ответ №1:

 $('.slider').slick({
  dots: false,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  centerMode: true,
  dots: false,
  focusOnSelect: true,
});

$('.slider').slick('slickGoTo', 1); 
 .slider {
  max-width: 450px;
}

.slider .slick-slide {
  padding: 20px;
  outline: none;
}

.slider .slick-slide .inner {
  border: 2px solid #000;
  min-height: 550px;
  padding: 20px;
} 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6 Zq HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<div class="slider">
  <div>
    <div class="inner">
      SLIDE 1
    </div>
  </div>
  <div>
    <div class="inner">
      SLIDE 2
    </div>
  </div>
  <div>
    <div class="inner">
      SLIDE 3
    </div>
  </div>
</div>

Ответ №2:

Сначала скройте горизонтальное переполнение родительского контейнера.

Тогда, я думаю, вы могли бы сделать что-то вроде этого

 <div class="container-item" style="--i: 0"></div>
<div class="container-item" style="--i: 1"></div>
<div class="container-item" style="--i: 2"></div>


.container-item{
    --active: 0
    transform: translateX(calc((var(--i) - var(--active))* width ))
} 

//width refers to the width of the current element which has to be set by you or you may use javascript to find that

и используйте Javascript для изменения значения —active при нажатии на стрелки карусели.

Синтаксис, который я использовал в функции calc, может быть недопустимым, поэтому вам придется его немного изменить.

Метки: ,