Слайдер. Настройка эффектов.

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

Dysha-Kuzbass M
Аватара
Dysha-Kuzbass M
Возраст: 34
Репутация: 0
Сообщения: 115
Зарегистрирован: 17.05.2017
С нами: 3 года 11 месяцев
Откуда: Кузбасс
ВКонтакте

Сообщение #1 Dysha-Kuzbass » 01.04.2021, 10:50

Гуру, приветствую!
Я как-то создавал тему по этому поводу, но закрыл её...

Суть в чём! Как-то задавался вопросом как сменить эффект перелистывания слайдера на главной странице? Т.е., чтоб он не просто как лист в книге перелистывался, а с эффектом, допустим: fade.

В общем:
design/шаблон/js/swiper-bundle.min.js

CTRL+F, ищем: effect:"slide" и меняем на effect:"fade".

Вот не много эффектов для настройки слайдера!
**************************************************************
Fade — Модуль Fade Effect
Cube — Модуль эффектов куба
Flip — Модуль Flip Effect
Coverflow — Модуль эффектов Coverflow

makki M
makki M
Репутация: 189
Сообщения: 628
Зарегистрирован: 12.08.2016
С нами: 4 года 8 месяцев
Откуда: Киев
Сайт

Сообщение #2 makki » 01.04.2021, 11:26

А для чего тогда Swiper API ?

Наверное так будет правильнее:

Код: Выделить всё

const swiper = new Swiper('.swiper-container', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
});


https://swiperjs.com/swiper-api#fade-effect
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

Dysha-Kuzbass M
Аватара
Dysha-Kuzbass M
Возраст: 34
Репутация: 0
Сообщения: 115
Зарегистрирован: 17.05.2017
С нами: 3 года 11 месяцев
Откуда: Кузбасс
ВКонтакте

Сообщение #3 Dysha-Kuzbass » 01.04.2021, 11:43

makki писал(а):Наверное так будет правильнее:
А это как работать будет? Можно чуть пояснить?

makki M
makki M
Репутация: 189
Сообщения: 628
Зарегистрирован: 12.08.2016
С нами: 4 года 8 месяцев
Откуда: Киев
Сайт

Сообщение #4 makki » 01.04.2021, 12:06

С новой версией не знаком, 2-я вполне устраивает. Но сходу посмотрел что настройки банера в файле Okay/Modules/OkayCMS/Banners/design/html/show_banner.tpl
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

Vanger M
Vanger M
Репутация: 4
Сообщения: 23
Зарегистрирован: 08.06.2016
С нами: 4 года 11 месяцев

Сообщение #5 Vanger » 01.04.2021, 16:44

makki писал(а):С новой версией не знаком, 2-я вполне устраивает. Но сходу посмотрел что настройки банера в файле Okay/Modules/OkayCMS/Banners/design/html/show_banner.tpl
да, там под все баннеры и слайдер
после slidesPerView: 1,
можно добавить например:

Код: Выделить всё

effect: 'fade',   
loop: true,
fadeEffect: { crossFade: true },

Dysha-Kuzbass M
Аватара
Dysha-Kuzbass M
Возраст: 34
Репутация: 0
Сообщения: 115
Зарегистрирован: 17.05.2017
С нами: 3 года 11 месяцев
Откуда: Кузбасс
ВКонтакте

Сообщение #6 Dysha-Kuzbass » 01.04.2021, 17:02

В общем, это работает так:
Okay/Modules/OkayCMS/Banners/design/html/show_banner.tpl заменить последний код:

Код: Выделить всё

{if $banner_data->settings.as_slider}
<script>
    document.addEventListener('DOMContentLoaded', function(){
        $('.fn_banner_{$banner_data->group_name|escape}').each(function(){
            var swiper = new Swiper(this, {
            loop: {if isset($banner_data->settings.loop) && !empty($banner_data->settings.loop)}true{else}false{/if},
            {if isset($banner_data->settings.autoplay) && !empty($banner_data->settings.autoplay)}
                autoplay: {
                    delay: {if isset($banner_data->settings.rotation_speed) && !empty($banner_data->settings.rotation_speed)}{$banner_data->settings.rotation_speed|intval}{else}2500{/if},
                },
            {/if}
            {if isset($banner_data->settings.nav) && !empty($banner_data->settings.nav)}
                navigation: {
                    nextEl: this.querySelector('.swiper-button-next'),
                    prevEl: this.querySelector('.swiper-button-prev'),
                },
            {/if}

            {if isset($banner_data->settings.dots) && !empty($banner_data->settings.dots)}
            pagination: {
                el: this.querySelector('.swiper-pagination'),
                clickable: true,
                },
            {/if}
            slidesPerView: 1,
         effect: 'fade',   
         loop: true,
         fadeEffect: { crossFade: true },
            watchOverflow: true,
            breakpoints: {
                320: {
                    slidesPerView: 1,
                },
                991: {
                    slidesPerView: 1,
                },
            }
          });
        });
    });
</script>
{/if}


Название раздела: Вопросы по работе с OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Вопросы по работе с OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 6 гостей