Слайдер "До" и "После"

Данный слайдер накладывает две фотографии друг на друга и заменяет их движением мыши.

Ранее уже была заметка с похожим слайдером: splitpic.js

Отличаются они тем, что этот скрипт работает по клику мышки, а не по ее движению, как splitpic.js

Пример:

Функцию animateTo("значение") (о ней ниже) можно использовать для перемещения ползунка в нужное место и использовать на кнопках или в тексте. Например:

Когда мы лазали зимой в горах, нам хотелось лета (на лето нужно кликнуть)

HTML:

Стрелочки сделаны шрифтом Font Awesome

CSS:

JS:

  • Подключаем jQuery (если не подключено ранее)
  • Подключаем jQuery UI для вашей версии jQuery с взаимодействием Draggable или полную. Для jQuery 1.7+ можно использовать эту.
  • Подключаем приведенный ниже код

Если нет желания использовать jQuery UI, который обеспечивает перетаскивание ползунка мышкой, можно его не подключать. В этом случае слайдер будет меняться только по клику на нем мышки. Для этого нужно удалить код:

Для перемещения ползунка в нужное место используется функция animateTo("значение")

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Kiso:

    Как добавить два и больше таких слайдера на 1 страницу ? и что бы при этом каждый слайдер работал независимо от других, сейчас если добавить 2 таких на 1 страницу то при смещении одного смещается и другой

    Ответить
    • Nick:

      Добавить 2 скрипта, 2 html блока с разными названиями и в скриптах соответственно

      Ответить