Горизонтальный пример:
Slide
Вертикальный пример:
Slide
Установка:
Добавляем на сайт библиотеку jQuery, скрипт splitpic.js и его стили splitpic.css
Инициализируем скрипт splitpic после полной загрузки страницы, чтобы размеры изображений были правильно рассчитаны:
|
1 2 3 4 5 6 7 8 9 10 |
$(window).on("load", function () { /* Для горизонтальных фото */ $('.splitpic-horizontal .splitpic-images').each(function (i, v) { var sp = new SplitPic(v); }); /* Для вертикальных фото */ $('.splitpic-vertical .splitpic-images').each(function (i, v) { var sp = new SplitPicVertical(v); }); }); |
HTML коды выглядят следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="splitpic splitpic-horizontal" data-orientation="horizontal"> <div class="splitpic-images" data-start-percent="0"> <div class="splitpic-image splitpic-right-image"> <div> <img src="photo-1.jpg"> </div> </div> <div class="splitpic-image splitpic-left-image"> <div> <img src="photo-2.jpg"> </div> </div> <div class="splitpic-bar"></div> <div class="splitpic-info"> <span class="fa fa-chevron-left"></span> Slide <span class="fa fa-chevron-right"></span> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="splitpic splitpic-vertical" data-orientation="vertical"> <div class="splitpic-images" data-start-percent="0"> <div class="splitpic-image splitpic-right-image"> <div> <img src="photo-1.jpg"> </div> </div> <div class="splitpic-image splitpic-left-image"> <div> <img src="photo-2.jpg"> </div> </div> <div class="splitpic-bar"></div> <div class="splitpic-info"> <span class="fa fa-arrow-up"></span> Slide <span class="fa fa-arrow-down"></span> </div> </div> </div> |
Стрелочки сделаны шрифтом Font Awesome
Альтернативный вариант такого слайдера можно поглядеть в заметке: Слайдер "До" и "После" . Он отличается тем, что смена изображений в нем происходит по клику.
splitpic на github
Автор: Onion, Inc. tech team
Добавить комментарий: