Всем привет!
Озадачился вёрсткой адаптивного слайдера на CSS+JS без сторонних фреймворков.
По ТЗ надо сделать так:
- на разрешении для мобильных устройств идут слайды малого размера (либо какая-то часть от большого слайда)
- с увеличением разрешения в слайд добавляются новые элементы, картинки и больше текста.
Изначально применил подход, отображенный здесь:
www.internet-technologies.ru/articles/article_2155.html
Т.е. идёт #wrapper с изображениями, контейнер ограничивает видимую область и далее в дело вступает JS:
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li> <!--Для примера, атрибут ставится в зависимости от ширины слайда-->
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
Но как сделать такую вещь адаптивной, т.е. как выводить разные изображения в слайдер (или активировать разные части слайда)? Проблема в том, что по технологии, описанной в ссылке выше, координаты для перемещения задаются один раз, атрибутами data у ссылок. И как их поставить в медиазапросах - я не знаю.
Или есть способ активизировать участок JS кода в зависимости от ширины экрана, что позволит добавить нужные классы с изображениями?
Простой
Средний
