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

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

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

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

Не могу никак придумать как такое сделать. Тот что первый, это декстоп, а нижний мобилка, но как это сделать. Моя идея была что при уменьшении экрана, когда уже начинает блок вылазить из общего полотна, подключался сразу слайдер, но я не могу придумать как его написать, чтобы размер подгонялся.
  • Вопрос задан
  • 69 просмотров
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. Потом смотришь какую разметку он после себя оставил и стилизуешь под нужный вид
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro
23 дек. 2024, в 00:27
20000 руб./за проект
Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro
23 дек. 2024, в 00:15
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы