JQuery-слайдери зображень: приклади

Elastislide

Реалізує кілька варіантів слайдера-каруселі, є адаптивним.

Для початку роботи потрібно отримати файли з GitHub, підключити на сторінку. Передбачено підключення картинок динамічно за допомогою PHP.

var $items = $(‘

  • ‘);
    $(‘#carousel’).append($items).elastislide( ‘add’, $items );

    Orientation задає спосіб перемикання: вертикально чи горизонтально. Speed відповідає за швидкість зміни слайдів, за умовчанням встановлено значення 500. Мінімальна кількість слайдів у блоці каруселі встановлюється в minItems. Якщо планується використовувати в якості елементів тільки зображення, це можна записати у властивості imgSizeItemSelector. Перший слайд має індекс 0, що є стартовим елементом. Встановленням потрібного індексу змінюється порядок. Автопереключення записується як autoSlide: true. Відступи від зображення вказуються властивості margin, ширина кордону – border.

    Цікаве:  Як створити логотип або емблему самостійно?