Как из одинарного блока сделать адаптивный слайдер?

Question

starkingdom @starkingdom

HTML
CSS

Как из одинарного блока сделать адаптивный слайдер?

Подскажите, как из такого блока

сделать такой блок

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

Вопрос задан более года назад
79 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

Если опыта в js мало то вряд-ли получится сделать хорошо слайдер с адаптивом, как вариант подключить уже готовые решения по типу swiper/slick. Если же хочется самому то есть уроки на Ютубе, правда за доступность с телефона не уверен что там будет сказано

Answer 1 · 2023-05-14 11:15:31

<head>
  ...
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  ...
  <script type="text/javascript" src="slick/slick.min.js"></script>
  ...
</head>

<div class="slider-container">
  <div class="slider-item"><img src="image1.jpg" alt=""></div>
  <div class="slider-item"><img src="image2.jpg" alt=""></div>
  <div class="slider-item"><img src="image3.jpg" alt=""></div>
</div>

<style>
.slider-container {
  width: 100%;
  margin: 0 auto;
}

.slider-item {
  width: 100%;
  margin: 0 auto;
}
</style>

<script type="text/javascript">
  $('.slider-container').slick({
    dots: true, // показать точки навигации
    infinite: true, // зациклить слайдер
    speed: 300, // скорость анимации
    slidesToShow: 1, // количество показываемых слайдов
    adaptiveHeight: true // подгонять высоту слайдера под высоту изображения
  });
</script>

Как из одинарного блока сделать адаптивный слайдер?

Войдите на сайт