Як створити простий слайдер зображення товару на jQuery

Іноді створити слайдер зображення самому, простіше ніж шукати готове рішення. Я хочу поділитись рецептом як зверстати простий і швидкий слайдер зображення товару для вашого сайту.

Слайдер — це блок певної ширини, який займає частину сторінки або всю її повністю. Основна його особливість — це контент який змінюється динамічно в автоматичному або ж ручному режимі. Це може бути як фотографії (зображення, картинки) так і лінки на текстову інформацію.

Задача

На одному із проектів мені потрібно було створити ось такий слайдер:

Slider

Як видно із макету слайдер без будь-яких кнопок керування, що власне спрощує роботу. То ж я вирішив не використовувати жодних скриптів аби додати мінімальний код.

Створення слайдера

Перед підключенням файла скриптів не забудьте підключити jQuery:

Код слайдера буде таким:

Блок із класом .sliderThumbWrap містить превю зображення. Відповідно блок .sliderWrap містить великі зображення товару. Тут варто зауважити один момент. До тега <a> що містить прев'ю зображення додаємо атрибу data-slide-id який рівний id відповідного великого зображенням. До першого зображення додаємо клас .active.

Ось jQuery скрипт:

Працює він досить просто. При кліку на контейнер превюшки, першим ділом ми знаходимо активний слайд із класом .active та видаляємо цей клас (стр. 3) тим самим перше активне зображення ми робимо неактивним. Наступним крок змінній imgId присвоюємо значення id нажатого зображення (стр. 4). Дальше ми зображенню із відповідним id додає клас .active (стр. 5) Цього коду достатьно аби забезпечити дієздатність нашого сладера. Перейдемо до стилів.

Щодо стилів то тут теж все просто. Блок .sliderWrap має відносне позиціонування та жорстко задані ширину та висоту. Адже цей блок містить зображення що мають абсолютне позиціонування. Що дозволяє керувати їхнім розміщення по осі z. Усі не активні зображення мають z-index рівний 1. Натомість зображення із класом .active має z-index рівний 2, що розміщує його поверх усі інших зображень. Для того аби добитись плавності використовуємо css transition та правило opacity. Зауважте в не активних зображень opacity рівне 0. Натомість у активного воно дорівнює 1. Для того аби css transition підтримувалось усіма браузерами не забувайте додавати анімацію із префіксами.

Роботу цого прикладу ви можете побачити тут.

Вам вже є 18 років?

Для переходу по цьому посиланню ви повинні підтвердити, що вам виповнилось 18 років.

Мені немає 18 Мені вже є 18