Simple Slider JS [1.11]

Простой слайдер для сайта на jаvascript. Имеет следующие возможности:

• автоматическое перелистывание,
• установка нескольких слайдеров на страницу,
• шаг перелистывания,
• вертикальный, горизонтальный,
• перелистывание на начало.

В архиве шаблон для подключения. Подробности установки смотрите в теме поддержки.

Установка

1. Подключить стиль.
2. Создать соответствующую разметку, как в файле index.html.
3. Подключить скрипт slider.js в конец страницы.
4. После подключенного скрипта, провести инициализацию, как написано ниже.

// задаем параметры слайдера
    let sl1 = {
        selector: '#slider-1', 
        auto: 0, 
        step: 1, 
        translate: 'translateY',
        transition: .3,
        transfer: false, 
        noinit: 'hide',
	slideSelector: '.slider-block'
    }

// устанавливаем слайдер
new SimpleSlider(sl1);

Параметры слайдера

1. selector - селектор родительского блока слайдера.
2. auto - скорость автопролистывания в милисекундах.
3. step - шаг пролистывания.
4. translate - направление слайдера. translateX - горизонтальный, translateY - вертикальный.
5. transition - время движения слайдера в секундах. Не рекомендуются большие значения, а также значения превышающие значение auto.
6. transfer - перенос слайдера на начало.
7. noinit - действие, если разметка слайдера неверная или пустое содержимое: hide - скрывает блок с помощью стиля, remove - удаляет блок из DOM.
8. slideSelector - селектор слайда. Просто укажите, какой селектор используется.

Установка нескольких слайдеров

Если нужно установить несколько слайдеров на странице, то для каждого слайдера создайте новый объект с параметрами. У каждого слайдера должен быть разный селектор.

Часто задаваемые вопросы FAQ

• Как изменить ширину слайдера? Тут все просто. По умолчанию слайдер заполняет весь родительский блок. Если вам нужно указать определенную ширину, сделайте это через стиль.
• Как изменить высоту слайдера? Высоту так же указывайте через стиль.
• Я не понял как устанавливать слайдер. Если вы посмотрели пример и ничего не поняли, тогда задавайте вопросы в комментариях.