Shopify. Як керувати налаштуваннями слайдера (швидкість, ефекти, автоматичне перемикання слайдів)
З цього туторіалу Ви дізнаєтесь, як керувати налаштуваннями слайдера у шаблоні Shopify.
-
У наших шаблонах Shopify використовується NivoSlider, чиї установки задаються в коді. Ви можете перевірити вихідний код сторінки, щоб знайти скрипт, який підключає слайдер.Натисніть правою кнопкою миші (Right-click) та виберіть"Подивитися код сторінки" (View page code):
Знайдіть відповідний фрагмент коду, використовуючи словослайдер (slider) для пошуку. Далі використовуйте клавішіCTRL+F, щоб відкрити форму поіка. На цьому скіншоті Ви можете бачити, як виглядає цей фрагмент коду:
Тепер Вам потрібно змінити налаштування слайдера у файлах шаблону. Відкрийте адмін панель і перейдіть до розділуТеми (themes). Внесіть зміни до файлів:
У нашому випадку код знаходиться у файліsnippet-js-footer.liquid. Знайдіть відповідний фрагмент коду. Тут Ви можете змінити налаштування слайдера:
У цьому файлі Ви можете змінити швидкість анімації, час паузи (animation speed, pause time) та інші налаштування. Ми також можемо змінити ефект анімації. Ось перелік доступних ефектів. Ви можете вибрати один із них:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
Ми змінилиефект (effect),швидкість анімації та час паузи (animation speed and pause time):
За замовчуванням слайдиперемикаються автоматично. Ви можете вимкнути автоматичне перемикання слайдів, додавши наступний параметр:
Збережіть зміни та перевірте ваш сайт.