Для коректної роботи прикладу нам буде потрібно бібліотека jQuery і три графічних файла з іменами pic1.jpg, pic2.jpg, pic3.jpg розміром 200x200 px.
Код прикладу складається з двох файлів: slider.html і slider.js. У файлі slider.html визначена HTML-розмітка блоку зі слайдером, містяться зображення і кнопки прокрутки слайдера. У файлі slider.js міститься опис дій, які виконуються при натисканні кнопок "вліво" і "вправо".
1. Файл slider.html
На початку файлу визначаються стилі. Сенс здебільшого стилів - прибрати різні відступи у елементів, тому що при скроллінгом слайдера застосовуються арифметичні розрахунки з використанням ширини об'єктів і важливо, щоб елементи не мали відхилень по ширині від заданих вручну, в іншому випадку при скроллінгом можуть виникати непередбачувані зміщення і інші помилки.
Структура слайдера предствляет з себе 3 вкладених один в одного об'єкта: lenta, cont і slider.
Об'єкт lenta определеяется видиму область слайдера, в прикладі ми обмежуємо його 660 px по ширині (цього якраз вистачить на 3 зображення 200x200 px із заданими відступами).
Об'єкт cont визначає вміст слайдера, він вільно переміщається всередині об'єкта lenta по горизонталі, створюючи візуальний ефект прокручування.
Об'єкт slider містить в собі таблицю із зображеннями що показують в слайдері. В даному прикладі без таблиці ніяк не обійтися, інакше зображення починають шикуватися не тільки по горизонталі, але і вертикалі, що суперечить ідеї слайдера.
Крім слайдера в розмітці визначено кнопки left_btn ( "вліво") і right_btn ( "вправо"), для прокрутки слайдера у відповідних напрямках.
Оброблювач подій від кнопок зберігатися в файлі slider.js.
2. Файл slider.js
На початку файлу slider.js використовуються настройки:
on_screen_pic - кількість зображень у видимій частині слайдера;
slider_diff - зміщення в px, на яке прокручується слайдер при натисканні на кнопку (повинно бути обов'язково дорівнює сумі ширини зображення і відступів);
У файлі slider.js застосовується елементарна арифметика. Алгоритм роботи кожної кнопки наступний:
1. Визначаємо, чи можемо ми ще зрушити слайдер в зазначеному напрямку не упершись в край;
2. Якщо можемо, то зрушуємо слайдер, інакше залишаємо положення без зміни.
Хочете доповнити матеріал? - Пишіть нам: [email protected]