Як створити карусель мініатюр на основі bxSlider

В попередній статті я розповідав про bxSlider. Описував його функціональність та налаштування. Якщо ви довший час, у свої проектах, використовуєте цей слайдер як основний, то я більш ніж впевнений ви стикались із ситуаціями коли функціональності було недостатньо аби вирішити поставлену задачу. Із такою задачею стикнувся і я, про неї згодом.
Раніше я писав, що bxSlider дозволяє створювати велику кількість слайдерів, що в основному задовільняє більшість потреб користувачів, а саме:

  • слайдер зображення із підписом;
  • слайдер із кнопками старт/стоп
  • слайдер із скінченним циклом, тобто він працює від першого слайда до останнього. Після чого він припиняє слайдити;
  • слайдер для зображення різної висоти. Цей тип слайдера плавно змінює слайди і підлаштовується під висоту кожного із них;
  • карусель – тип слайдера, який показує більше одного слайда. Варто зазначити, що карусель може бути двох видів. Із статичною та динамічною кількістю слайдів;
  • слайдер із вертикальною орієнтацією;
  • слайдер відео;
  • слайдер із мініатюрами в якості пагінації;

От власне саме останній тип слайдера нас цікавить. Поглянемо що по замовчуванню пропонує bxSlider:

bxSlider Thumbnail pager

Як бути у випадку, коли мініатюр буде досить багато. Тоді нам потрібно використати мініатюри у каруселі.

Задача

Створити слайдер із ефектом фейдін та пагінацією у вигляді мініатюр в якості каруселі. Основний слайдер повиннен слайдитись за допомогою кнопок Prev/Next та мініатюр пагінації. А карусель при кліку на мініатюру та кнопки Prev/Next основного слайдера.

Давайте глянемо що у нас повинно получитись в резуьтаті:

bxSlider with thumbnail carousel

Html структура майбутнього слайдера наступна:

Дещо поясню. Контейнер .singleProjectGallery із правилом position: relative; адже відносно нього ми позиціонуватимемо .projectGalleryThumb – блок каруселі. Ще варто відзначити що слайдам li ми додаємо атрибут data-slide який буде рівним порядковому номеру слайда у слайдері. Номерацію ми починаємо з 0. Не забувайте!
Дехто із вас запитає. Чому у головному слайдері я використовую конструкцію style="background-image: url(images/content/projectImg1.jpg);", а не задаю зображення як зазвичай?
В мому випадку зображення слайдера повинно бути розтягнуте на всю ширину та висоту слайда. Цього можна добитись лише в тому випадку якщо для слайда задати наступні стилі.

Правило background-size: cover; розтягує наше фонове зображення (зберігаючи пропорції) до тих пір поки воно не перекриє наш слайд.

Ось як виглядає скрипт за допомогою якого ми це реалізуємо:

Детальніше опишу як працює скрипт.

Строки 2-17

Тут ми ініціалізуємо два слайдери із певними параметрами. mainSlider – головний, thumbSlider – слайдер мініатюр.

Строки 19-21

Для зручності використання в подальшому, присвоюємо змінним наші кнопки Prev/Next та контейнер мінітюр #projectGalleryPager

Строки 23-36

При кліку на кнопку bxNext за допомогою функції getCurrentSlide(); ми знаходимо активний слайд. Та завдяки атрибуту data-slide ми можемо повязати активний слайд головного слайдера та активну мініатюру, присвоївши їй клас .active. Функцією goToNextSlide(); ми слайдемо нашу карусель до наступного слайда.
Із кнопкою bxPrev все аналогічно. Окрім функції яка слайдить карусель вона інша – goToPrevSlide();

Строки 38-53

Частина скрипта яка відповідає за клік по мінітюрі. Що ми робимо тут?
При кліку на мініатюру. Першим ділом ми провіряємо умову if (!$(this).closest("li").hasClass("active")) чи не нажата активна мініатюра. Наступним кроком ми присвоюємо змінним prevCurrentSlide – активну мініатюру і currentSlide мініатюру яка має стати активною. Строками 43-44 міняємо ці мініатюри місцями. Наступний крок провіряємо умову if (prevCurrentSlide < currentSlide ) якщо активна мініатюра в каруселі стояла перед натиснутою мініатюрою, то ми головний слайд та карусель слайдемо вперед. Якщо ж навпаки то слайдимо назад.

Ось так на перший погляд складно, та повірте якщо вникнути то тут все досить просто, ми створили потрібний нам слайдер. Якщо є питання та зауваження готовий відповісти та вислухати їх у коментах.
Ледь не забув! Робочий варіант слайдера можна глянути по ссилці.

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

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

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