Ранее уже была заметка с похожим слайдером: 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); }) |
Здравствуйте! Подскажите, как с фильтрами совместить? <div class="sl-container">
Я отсюда: https://atuin.ru/blog/filtr-dlya-fotografij-na-webgl
Пробовал вот так:
<div class="sl-container">
<div class="view view-after">
<canvas id="image-filter-canvas"></canvas>
</div>
<div class="view view-before">
<img src="/img/3d/1.jpg"/>
</div>
<div class="dragme"><div class="dr-circle"><i class="fa fa-arrows-h" aria-hidden="true"></i></div></div>
</div>
не выходит)
Дайте ссылку на результат
Всё хорошо. Не знаю, что мне померещилось спросонья... Но я думал что-то сделал не так я. Наверное не совсем проснулся, сразу за ноут и на Ваш сайт. Спасибо за Ваши труды! Всё просто супер на Вашем сайте! С праздником !
Понадобилось давече наложить один список на другой (смысл такой же как с картинками) на мобильном разрешении, а на дектопе контейнеры списков были друг на против друга. По другому никак иначе смысл перечней терялся. Вдохновился данным подходом, но jquery-ui даже в урезанном и минифицированном виде оказалась великовата. Кроме того, исользовать все нужно было только на одной странице сайта. В итого, родилось следующее -- все то же самое, но без jquery
Для понимания приведу разметку: (стили кому нужно напишите), идея проста -- дектоп два контейнера внутри одного на гридах, на мобилка -- контейнеры накладываются друг на друга абсолютом, в принципе как и тут.
Потом я подумал, что будет неплохо, если слушателей не будет на разрешениях где они не нужны. Поэтому кода стало чуть больше, стоит все вынести в именованные функции и на остальных разрешениях заремувить слушатели.
Более гуманный вариант скрипта:
Возможно поможет кому то (тезке что ниже спрашивал про разные разрешения)
Хотелось сохранить форматирование, но не судьба)
Поправил код
У меня тут по олдскульному они, через BBCode 🙂
поправил немного код, чтобы работал если на странице несколько слайдеров
и чтобы размеры изображений подгонялись под блок
"Подключаем jQuery"
Это как сделать?
И вообще куда коды вставлять в какое место. Можно поподробнее
Никак не соберусь написать помощь по установке...
Подключается как и любой скрипт, а как остальное я даже не знаю как в 2х словах написать..
Напишите в ТГ или ВК, попробую подсказать.
Да хотя бы на примере пустого сайта.
Скачать то то (такие то файлы)
положить в папки такие то
в файле таком то прописать то то
в файл таком то прописать то то
А лучше просто архивчик пустого сайта с одной страницей и этим скриптом
Класно, спасибо сворую на совй веб сайт
А как сделать, чтобы ползунок работал и в мобильной версии? Это возможно?
Смотрите jQuery UI Draggable
Погуглил) Мало что понял)
С помощью какой команды нужно включить jQuery?
Если не подключена, то отсюда:
Как добавить два и больше таких слайдера на 1 страницу ? и что бы при этом каждый слайдер работал независимо от других, сейчас если добавить 2 таких на 1 страницу то при смещении одного смещается и другой
Добавить 2 скрипта, 2 html блока с разными названиями и в скриптах соответственно