Js animated

Наша Команда техпідтримки рада представити Вам новий туторіал, який покаже, як працювати зі слайдером Swiper в Веб-шаблонах.

Підключіться до вашого клієнта FTP або відкрийте Файловий менеджер Панелі управління хостингом, для того щоб отримати доступ до файлів сайту.

Відкрийте ваш файл * .html, для того щоб знайти код слайдера на сторінці (як правило, це файл index.html). Використовуйте Ctrl + F, для того щоб виконати пошук за ключовим словом 'swiper', або просто перейдіть вниз, для того щоб побачити блок слайдера:

Js animated
  • Ви можете вказати параметри слайдера в атрибуті data-parameter. де 'parameter' - це настройка, яку Вам потрібно буде змінити, наприклад, data-height дозволить Вам змінити висоту слайдера. Нижче, Ви можете знайти список атрибутів, доступних для зміни (для цільового елемента з класом «swiper-slider»):

    data-height - задає висоту слайдера в пікселях (визначає статичну висоту, вона залишиться незмінною при зміні дозволу екрану); *% (Визначає висоту слайдера як відсоток від його ширини); * Vh (визначає висоту слайдера як відсоток від висоти вікна).

    data-min-height - визначає мінімальну висоту слайдера, подібно атрибуту data-height.

    data-autoplay - визначає автоматичне початок показу слайдів. Ви можете задати значення «Так» / «Ні», для того щоб включити / відключити автоматичне відтворення слайдів. Ви можете також вказати часовий показник в мілісекундах, для того щоб задати часовий відрізок між перемиканнями слайдів, наприклад, data-autoplay = "3000".

    data-loop - визначає, чи зупиниться відтворення слайдів на останньому слайді. Ви можете задати значення «Так» / «Ні», наприклад, data-loop = "false".

    data-direction - визначає напрямок перемикання слайдів. Ви можете задати значення «Горизонтально» / »Вертикально», наприклад, data-direction = "horizontal».

    data-slide-effect - визначає ефект слайдера. Ви можете задати значення fade / slide / coverflow / cube, наприклад, data-slide-effect = "slide».

    Для того щоб змінити вміст слайдів, просто змініть шлях до зображення слайда в атрибуті data-slide-bg і обновіть текст слайда нижче. Зверніть увагу на наступний приклад:

    де «images / page-01_slide01.jpg» - це зображення слайда, а весь вміст в блоці з класом «swiper-slide-caption» - це текст слайда.