Как вставить в Популярное button-next и button-prev

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

Aleks
Aleks
Репутация: 18
Сообщения: 161
Зарегистрирован: 24.05.2021
С нами: 1 год 2 месяца

Сообщение #1 Aleks » 11.01.2022, 11:16

Здравствуйте, уважаемые Гуру.
В main.tpl блок Featured products (Популярное). Limit удаляю.
Все работает. Картинки свободно сдвигаются мышкой.
Блок пагинации весьма неудобен. Располагается на картинке. Позиционирование его абсолютное.
<div class="block__body">
<div class="fn_products_slide products_list row no_gutters swiper-container">
<div class="swiper-wrapper">
{foreach $featured_products as $product}
<div class="item product_item swiper-slide no_hover">{include "product_list.tpl"}</div>
{/foreach}
</div>
<div class="swiper-pagination"></div>
</div>
</div>
{/if}
Желательно вставить вместо <div class="swiper-pagination"></div> два блока next и prev как на слайдере:
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
Пробовал вставлять, не работает.
Может кто подскажет, что нужно исправить для полноценной работы.

Master
Master
Репутация: 19
Сообщения: 59
Зарегистрирован: 25.01.2016
С нами: 6 лет 6 месяцев

Сообщение #2 Master » 11.01.2022, 18:23

Вы правильно сделали в main.tpl

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

<div class="fn_products_slide products_list row no_gutters swiper-container">
   <div class="swiper-wrapper">
        {foreach $featured_products as $product}
            <div class="item product_item swiper-slide no_hover">
                {include "product_list.tpl"}
            </div>
        {/foreach}
      </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>


Еще нужно в файле design/okay_shop/js/okay/js
найти код

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

 /* Carousel products */
    if( $('.fn_products_slide').length ) {
        $('.fn_products_slide').each(function(){
        var swiper = new Swiper(this, {
            slidesPerView: 1,
            pagination: {
                el: this.querySelector('.swiper-pagination'),
                clickable: true,
            },
            watchOverflow: true,
            breakpoints: {
                320: {
                    slidesPerView: 1,
                },
                360: {
                    slidesPerView: 2,
                },
                576: {
                    slidesPerView: 3,
                },
                768: {
                    slidesPerView: 3,
                },
                768: {
                    slidesPerView: 4,
                },
                1200: {
                    slidesPerView: 5,
                },
            }
          });
        });
    }


и вместо кода для пагинации

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

pagination: {
       el: this.querySelector('.swiper-pagination'),
        clickable: true,
  },
 

вставить код для стрелок навигации

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

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

и возможно добавить стили CSS

Aleks
Aleks
Репутация: 18
Сообщения: 161
Зарегистрирован: 24.05.2021
С нами: 1 год 2 месяца

Сообщение #3 Aleks » 11.01.2022, 19:10

СПАСИБО Мастер. Все заработало.


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

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


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

   

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

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

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