Нижче наведені деякі загальні тенденції і методи, які використовують розробники:
- Багаторівневі слайдери - це останнє доповнення до повзунки з ефектом паралакса.
- Слайдери з ефектами Fade In / Out - такі слайдери не мають управління. Вміст буде зникати одна за одною.
- Ротатор банерів - слайдери, які працюють по круговій траєкторії.
Також існують і інші слайдери. Кожен тип слайдеров підходить для певних цілей. Тому для дизайнера досить важливо вибрати саме той слайдер, який підійде для того чи іншого завдання найкращим чином. Слайдери великих розмірів можна використовувати для відображення продуктів або проектів, слайдер розмірами поменше, наприклад, для відображення популярних статей на блозі. Далі трохи поговоримо про те, з якими проблемами можуть зіткнутися розробники, якщо включити два слайдера на одній сторінці.
Недоліки використання декількох слайдеров JQuery
Як уже згадувалося далі різні слайдери відображають різні ефекти і їх можна використовувати для різних макетів. Існує багато недоліків використання декількох слайдеров на одній сторінці.
- Кожен слайдер матиме безліч скриптів і CSS файлів. Значна кількість скриптів і CSS файлів в свою чергу будуть сповільнювати час завантаження вашого сайту, що відобразиться на SEO.
- Для різних слайдерів можуть знадобитися різні версії jQuery. Тому JQuery-файли будуть дублюватися.
- можливість конфліктів в кодах з іншими слайдерами.
З огляду на вищевикладені пункти, на одній сторінці бажано використовувати один слайдер. Але це не є обов'язковим. Також можна створювати різні конструкції, використовуючи один слайдер. Для цього потрібно просто вибрати гнучкий слайдер, мати якісь навички роботи з JQuery і CSS, щоб налаштувати його. У цьому уроці розглянемо Rhino Slider, оскільки він є одним з самих гнучких доступним слайдеров.
Введення в Rhino Slider
Rhino Slider являє собою подвійний слайдер JQuery під ліцензією MIT. Більш детальну інформацію ви можете почитати тут. Наступне зображення показує вид Rhino слайдера.
Про те як можна використовувати даний слайдер, ви можете почитати в статті «Як створити форму за допомогою RhinoSlider». У цій статті ви зможете подивитися, як він працює. У сьогоднішньому уроці, ми подивимося, як створювати макети з різною функціональністю і одним слайдером.
Проектування користувальницьких навігації для слайдера
Навігація є, мабуть, однією з найважливіших частин слайдера. Навіть якщо створити слайдер з автоматичним проміжком часу зміни кадрів кращим є все ж забезпечити контроль управління користувачам. Взагалі кнопки Наступний і Попередній в слайдерах є дуже популярними. Rhino Slider, який використовується в цьому уроці містить пронумеровану навігацію, яка нагадує пагінацію.
Ми можемо досить легко змінити зовнішній вигляд слайдера. У цьому уроці ми ознайомимося з тим, як змінити основні стилі навігації. Давайте приступимо.
Визначення кнопок управління
Rhino Slider має три кнопки навігації - наступний, попередній слайд і розбивка на сторінки. Ці елементи представлені окремими класами CSS, так що вони можуть бути визначені досить легко.
Попередній слайд - rhino-prev
Наступний слайд - rhino-next
Тепер, мати швидкий погляд на картинку нижче, щоб отримати уявлення про те, як ми збираємося змінити дизайн.
Давайте тепер подивися на картинку нижче, щоб побачити, як ми будемо змінювати дизайн.
Крок 1 - Управління Prev / Next
Як ви можете бачити, розташування кнопок prev / next було змінено. Вони тепер стоять в середині, а не знизу і розміщені на чорному тлі. Давайте подивимося на зміну стилів:
створення превью
Ця частина буде трохи складніше. Тут ми розглянемо, як зробити поле з превьшкамі зображень, які буду розміщені замість нумерації. Ми будемо використовувати комбінацію CSS і JQuery.
Як тільки ви застосуєте стилі CSS, слайдер буде виглядати наступним чином.
Тепер ви зможете побачити превью зображень, як показано на малюнку нижче.
Слайдер з вертикальним розташуванням превью
Нижче наведені зміни, які потрібно внести в стилі, щоб змінити дизайн.
Використання слайдерів на одній сторінці
У попередніх розділах ми змінювали функціональність слайдера, використовуючи один і той же слайдер, змінюючи стилі CSS вихідного Rhino слайдера. Але коли на одній сторінці нам потрібно використовувати кілька слайдерів, ми не можемо змінювати стиль, як це робили раніше. Для визначення різних стилів для тих же класів і елементів нам потрібен альтернативний метод.
Спочатку нам потрібно реалізувати Rhino Slider окремо, визначивши різні ID.