Задать вопрос
@starkingdom
html

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

Подскажите, как из такого блока
64600b95167c9847367421.png

сделать такой блок
64600bf6b65f1861685368.png

Не могу никак придумать как такое сделать. Тот что первый, это декстоп, а нижний мобилка, но как это сделать. Моя идея была что при уменьшении экрана, когда уже начинает блок вылазить из общего полотна, подключался сразу слайдер, но я не могу придумать как его написать, чтобы размер подгонялся.
  • Вопрос задан
  • 54 просмотра
1 комментарий
Подписаться 1 Средний 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
i229194964
@i229194964
Веб разработчик 
<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>
Ответ написан
Комментировать
Комментировать
imko
@imko
Senior Scratch Developer
Скорее наоборот, из слайдера сделать статичный блок.
Берешь свой любимый слайдер, ищещшь у него в опциях брейкпоинты и пишешь чтобы выше твоей мобилки он отключался, обычно это называется destroy. Потом смотришь какую разметку он после себя оставил и стилизуешь под нужный вид
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработать блокчейн на golang
28 апр. 2024, в 17:10
20000 руб./за проект
100 лидов на сайт - нужен трафик
28 апр. 2024, в 15:00
100000 руб./за проект
Разработать сервер питон
28 апр. 2024, в 14:43
5000 руб./за проект
Ещё заказы