Слайдер с диагональной сменой фотографий

В сладере используется:

  • Стрелки для перещелкивания слайдов
  • Точки для быстрого перехода на нужный слайд
  • Возможность добавления заголовка, описания и кнопки "Подробнее"

В заметку также добавлено решение по установке этого слайдера на CMS HostCMS

За основу был взят слайдер, найденный на codepen.io: Split-screen Slideshow

Но слайд в нем складывается из двух частей одной фотографии, что сильно усложняет использование его в CMS, не говоря уже о его создании, ведь каждое фото нужно разрезать пополам.

Я его немного модифицировпл под себя, и теперь в слайдере используется одна и таже фотография два раза. Также заменил стрелки, выводимую информацию и еще по мелочи.

Пример:

  • Заголовок слайдера 1
    Короткое описание слайдера
    Подробнее
  • Заголовок слайдера 2
    Описание слайдера без кнопки подробнее
  • Заголовок слайдера 3
    Подробнее
  • Заголовок слайдера 4
    Длинное описание слайдера, для примера с большего объема текста. Но не стоит забывать, что текст должен уместиться в его размеры.
    Подробнее

HTML:

Обратите внимание: в одном слайде используется одна и таже фотография 2 раза, а количество селекторов <li class="selector"></li> должно соответствовать количеству слайдов.

CSS:

jQuery:

Установка на HostCMS:

Создаем информационную систему и в ней два дополнительных свойства типа "Строка" с названиями XML-тегов url (для ссылки "подробнее") и urltext (для названия этой ссылки)

Создаем XSL-шаблон с названием "Слайдер" и кодом:

Подключаем этот шаблон в макет:

Далее в информационную систему добавляем сам слайдер, в котором:

  • Название информационного элемента - это заголовок слайдера
  • Описание информационного элемента - это описание под его заголовком
  • И при необходимости, в дополнительных полях можно указать название кнопки и ссылку, куда по ней переходить.

Автор фотографий, используемых в слайдере: kellepics

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

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

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

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

  • Владислав:

    Подскажите пожалуйста, не работает переключатель (стрелки) как исправить?

    Ответить
  • Екатерина:

    Спасибо большое за подробную инструкцию! Использую в варианте для hostcms - при этом не работают стрелки, в чем может быть дело?

    Ответить
    • Alexander:

      Дайте ссылку на результат

      Ответить
  • Алекс:

    А будет пример для owl carousel?

    Ответить
  • Михаил:

    Здравствуйте!
    Подскажите, а как остановить автоматическую прокрутку?

    Ответить
    • Alexander:

      Удалить все строки, где присутствует interval, кроме первой, там просто можно удалить переменную.
      А если не убрать а остановить, например при заходе мыши на слайдер, то добавлять функции на вход и выход мышки.

      Ответить