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

CSS, HTML, PHP
1 комментарий

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

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

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

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

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

Ответы:

&lt;head&gt;   ...   &lt;link rel="stylesheet" type="text/css" href="slick/slick.css"/&gt;   &lt;link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/&gt;   ...   &lt;script type="text/javascript" src="slick/slick.min.js"&gt;&lt;/script&gt;   ... &lt;/head&gt;  &lt;div class="slider-container"&gt;   &lt;div class="slider-item"&gt;&lt;img src="image1.jpg" alt=""&gt;&lt;/div&gt;   &lt;div class="slider-item"&gt;&lt;img src="image2.jpg" alt=""&gt;&lt;/div&gt;   &lt;div class="slider-item"&gt;&lt;img src="image3.jpg" alt=""&gt;&lt;/div&gt; &lt;/div&gt;  &lt;style&gt; .slider-container {   width: 100%;   margin: 0 auto; }  .slider-item {   width: 100%;   margin: 0 auto; } &lt;/style&gt;  &lt;script type="text/javascript"&gt;   $('.slider-container').slick({     dots: true, // показать точки навигации     infinite: true, // зациклить слайдер     speed: 300, // скорость анимации     slidesToShow: 1, // количество показываемых слайдов     adaptiveHeight: true // подгонять высоту слайдера под высоту изображения   }); &lt;/script&gt;

1

<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>

Скорее наоборот, из слайдера сделать статичный блок.
Берешь свой любимый слайдер, ищещшь у него в опциях брейкпоинты и пишешь чтобы выше твоей мобилки он отключался, обычно это называется destroy. Потом смотришь какую разметку он после себя оставил и стилизуешь под нужный вид

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
08.04.2024

Ответить

Для создания адаптивного слайдера из одиночного блока можно использовать CSS и JavaScript. Вот пример решения этой задачи:

HTML:

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

1

2

3

4

5

<div class="slide">Slide 1</div>

<div class="slide">Slide 2</div>

<div class="slide">Slide 3</div>

</div>

CSS:

.slider {
  display: flex;
  overflow: hidden;
}

.slide {
  flex: 0 0 100%; /* каждый слайд занимает всю ширину */
}

1

2

3

4

5

6

7

8

.slider {

display: flex;

overflow: hidden;

}

.slide {

flex: 0 0 100%; /* каждый слайд занимает всю ширину */

}

JavaScript:

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function showSlide(index) {
  if (index = slides.length) {
    currentSlide = 0;
  } else {
    currentSlide = index;
  }

  const slideWidth = slides[currentSlide].clientWidth;
  slider.style.transform = `translateX(${-slideWidth * currentSlide}px)`;
}

function nextSlide() {
  showSlide(currentSlide + 1);
}

function prevSlide() {
  showSlide(currentSlide - 1);
}

window.addEventListener('resize', () => {
  showSlide(currentSlide);
});

showSlide(currentSlide);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

const slider = document.querySelector('.slider');

const slides = document.querySelectorAll('.slide');

let currentSlide = 0;

function showSlide(index) {

if (index = slides.length) {

currentSlide = 0;

} else {

currentSlide = index;

}

const slideWidth = slides[currentSlide].clientWidth;

slider.style.transform = `translateX(${-slideWidth * currentSlide}px)`;

}

function nextSlide() {

showSlide(currentSlide + 1);

}

function prevSlide() {

showSlide(currentSlide - 1);

}

window.addEventListener('resize', () => {

showSlide(currentSlide);

});

showSlide(currentSlide);

Этот код создает адаптивный слайдер, который автоматически подстраивается под ширину экрана. Стили CSS задают блоку слайдера и каждому слайду ширину, соответствующую ширине экрана. JavaScript обрабатывает переключение слайдов при нажатии на соответствующие кнопки или жесты. Кроме того, при изменении размера окна браузера слайдер также будет адаптироваться под новые размеры.

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

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

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

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно