Скрипт интернет-магазина Shop-Script 7

Добавить новый слайдер

1) Добавить в HTML код шаблона

{$promos = $wa->shop->productSet("promo")}
<div class="h3 text-center home-header">Заголовок блока
    <span class="arrow">
        <a href="#" class="js-slider-prev-1"><i class="fa fa-angle-left"></i></a>
        <a href="#" class="js-slider-next-1"><i class="fa fa-angle-right"></i></a>
    </span>
</div>
<div class="row container-catalog custom-slider js-slider-1">
    {include file="`$wa_active_theme_path`/list-thumbs.html" products=$promos}
</div>
  • promo - id списка блока
  • js-slider-next-1 - стрелка прокрутки слайдера (эта строчка прописывается в JS файле ниже)
  • js-slider-prev-1 - стрелка прокрутки слайдера (эта строчка прописывается в JS файле ниже)
  • js-slider-1 - индефикатор слайдера (эта строчка прописывается в JS файле ниже)

2) Добавить в shop.js найти строку кода

$(document).ready(function () {

После этой строчке вставить код отображения слайдера

$(".js-slider-1").owlCarousel({
    loop: true,
    items: 5,
    margin: 20,
    autoHeight: true,
    pagination: false,
    itemsDesktop: [1199, 5],
    itemsDesktopSmall: [1170, 4],
    itemsTablet: [968, 3],
    itemsTabletSmall: [768, 2],
    itemsMobile: [500, 2],
    paginationSpeed: 800,
    rewindSpeed: 1000,
    autoPlay: 15000,
    stopOnHover: false,
    center: true,
});

$(".js-slider-prev-1").click(function () {
    $(".js-slider-1").trigger("owl.prev");
    return false;
});
$(".js-slider-next-1").click(function () {
    $(".js-slider-1").trigger("owl.next");
    return false;
});

3) Добавить в файл стилей код

.container-catalog .custom-slider .adaptive {
    display: flex;
    flex-direction: column;
}
.custom-slider .adaptive {
    width: 100%;
    padding-left: 0;
    padding-right: 10px;
}

Для каждого нового слайдера менять все переменные js-slider-prev-1, js-slider-next-1, js-slider-1 на новые, например на js-slider-prev-2, js-slider-next-2, js-slider-2 во всех строчках кода

Смотрите также: