Ранее уже была заметка с похожим слайдером: splitpic.js
Отличаются они тем, что этот скрипт работает по клику мышки, а не по ее движению, как splitpic.js
Пример:
Функцию animateTo("значение") (о ней ниже) можно использовать для перемещения ползунка в нужное место и использовать на кнопках или в тексте. Например:
Когда мы лазали зимой в горах, нам хотелось лета (на лето нужно кликнуть)
HTML:
|
1 2 3 4 5 6 7 8 9 |
<div class="sl-container"> <div class="view view-after"> <img src="winter.jpg"/> </div> <div class="view view-before"> <img src="summer.jpg"/> </div> <div class="dragme"><div class="dr-circle"><i class="fa fa-arrows-h" aria-hidden="true"></i></div></div> </div> |
Стрелочки сделаны шрифтом Font Awesome
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
.sl-container { border: 10px solid #BFE2FF; margin: 20px auto; overflow: hidden; position: relative; width: 640px; height: 420px; box-sizing: border-box; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .sl-container .view { position: absolute; top: 0; left: 0; overflow: hidden; } .sl-container .view img { width: 640px; max-width: 640px; } .sl-container .view-before { z-index: 100; } .sl-container .view-after { width: 100px; z-index: 200; } .sl-container .dragme { position: absolute; width: 10px; height: 100%; top: 0px; left: 100px; background-color: #BFE2FF; cursor: pointer; z-index: 300; } .sl-container .dr-circle { position: absolute; top: calc(50% - 20px); left: -15px; border-radius: 100%; width: 40px; height: 40px; text-align: center; background-color: #BFE2FF; cursor: pointer; z-index: 300; } .sl-container .dr-circle i { line-height: 40px; font-size: 20px; color: #337AB7; font-weight: bold; } @media screen and (max-width: 600px) { .sl-container { width: 320px; height: 210px; } .sl-container .view img { width: 320px; max-width: 320px; } } |
JS:
- Подключаем jQuery (если не подключено ранее)
- Подключаем jQuery UI для вашей версии jQuery с взаимодействием Draggable или полную. Для jQuery 1.7+ можно использовать эту.
- Подключаем приведенный ниже код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
(function($) { var $dragMe = $(".dragme"), $container = $(".sl-container"), $viewAfter = $(".view-after"); $dragMe.draggable({ containment: "parent", drag: function() { $viewAfter.css({ width : parseFloat($(this).css('left')) + 5 }); } }); $container.on("click", function(event) { var eventLeft = event.pageX - $container.offset().left - 15; animateTo(eventLeft); }); animateTo("50%"); function animateTo(_left) { $dragMe.animate({ left: _left }, 'slow', 'linear'); $viewAfter.animate({ width: _left }, 'slow', 'linear'); } })(jQuery); |
Если нет желания использовать jQuery UI, который обеспечивает перетаскивание ползунка мышкой, можно его не подключать. В этом случае слайдер будет меняться только по клику на нем мышки. Для этого нужно удалить код:
|
1 2 3 4 5 6 7 8 |
$dragMe.draggable({ containment: "parent", drag: function() { $viewAfter.css({ width: $(this).css('left') }); } }); |
Для перемещения ползунка в нужное место используется функция animateTo("значение")
|
1 2 3 4 5 6 |
$(".zima").hover(function(){ animateTo("100%"); }) $(".leto").click(function(){ animateTo(-10); }) |
А как сделать, чтобы ползунок работал и в мобильной версии? Это возможно?
Смотрите jQuery UI Draggable
Погуглил) Мало что понял)
С помощью какой команды нужно включить jQuery?
Если не подключена, то отсюда:
Как добавить два и больше таких слайдера на 1 страницу ? и что бы при этом каждый слайдер работал независимо от других, сейчас если добавить 2 таких на 1 страницу то при смещении одного смещается и другой
Добавить 2 скрипта, 2 html блока с разными названиями и в скриптах соответственно