Бродя по просторам интернета в поисках вдохновения, или интересных вещей на CSS/jquery, я наткнулся на любопытный вертикальный слайдер.
Мне понравилась реализация этого слайдера, к тому же он:
- адаптирован под маленькие экраны
- адаптирован под retina-дисплей
Давайте для начала напишем наш html-код:
<aside id="yourSlider" class="hp07v0" data-hp07rotate="9">
<div class="hp07w1">
<div class="hp07w2">
<!-- 1й слайд -->
<section class="slide cfeature" data-bgimg="slide/img1.jpg" data-bgimg2x="slide/img1_2x.jpg">
<!-- Содержимое слайда -->
</section>
<!-- 2й слайд -->
<section class="slide" data-bgimg2x="slide/img2_2x.jpg" data-bgimg="slide/img2.jpg">
<!-- Содержимое слайда -->
</section>
<!-- 3й слайд -->
<section class="slide" data-bgimg="slide/img3.jpg" data-bgimg2x="slide/img3_2x.jpg">
<!-- Содержимое слайда -->
</section>
<!-- 4й слайд -->
<section data-bgimg2x="slide/img4_2x.jpg" data-bgimg="slide/img4.jpg" class="slide">
<!-- Содержимое слайда -->
</section>
<!-- 5й слайд -->
<section class="slide" data-bgimg="slide/img5.jpg" data-bgimg2x="slide/img5_2x.jpg">
<!-- Содержимое слайда -->
</section>
</div>
</div>
</aside>
Здесь - блоки с классом slide - наши слайдеры с содержимым. В атрибутах data-bgimg хранятся ссылки на фоновые изображения для обычных дисплеев, а в data-bgimg2x - для retina-дисплеев. Атрибут data-hp07rotate содетжит время (в секундах), через которое должен появиться новый слайдер. Собственно на этом все. Осталось только подключить стили, jquery и jquery ui, а также сам скрипт слайдера.