Корзина, избранное, в шапку со своими иконками
Добавить в шапку свои иконки корзины и избранного, присвоить им классы cartcopy_elem и favorites_icon соответственно. Добавить 2 текста с цифрой 0 и присвоить им классы cartcopy_elem и favorites_total соответственно. Внизу вставить три кода в три блока 123
<style>
.blkElem{pointer-events:none; }
.cartcopyanim {
-webkit-animation: t706__pulse-anim 0s;
animation: t706__pulse-anim 0s;}
.cartcopy_elem .tn-atom , .cartprice_elem .tn-atom {display:none}
.cartcopy{cursor:pointer}
.t706__carticon {display: none !important;}
</style>
<script>
$( document ).ready(function() {
let hideMode = false; //Скрыть-Показать пустую корзину - true-false
$('.cartcopy_elem .tn-atom').addClass('cartcopy');
$('.cartprice_elem .tn-atom').addClass('cartcopyprice');
function chkNum(){
if (window.tcart === undefined) { return; }
if(!hideMode) $('.cartcopy, .cartcopyprice').show();
let chCounter = window.tcart.total;
let chPrice = window.tcart.prodamount;
if (chPrice==0){
$('div[data-elem-type="text"] .cartcopyprice').html('');
if(hideMode) {$('.cartcopy, .cartcopyprice').hide()
}else{$('.cartcopy, .cartcopyprice').show()};
}else{
$('div[data-elem-type="text"] .cartcopyprice').html(chPrice+' руб');
if(hideMode) $('.cartcopy, .cartcopyprice').show();
};
$('div[data-elem-type="text"] .cartcopy').html(chCounter);
if(chCounter==0){ $('.cartcopy').addClass('blkElem');
}else{ $('.cartcopy').removeClass('blkElem'); };
if(chCounter==''){$('div[data-elem-type="text"] .cartcopy').html(0);}; };
setTimeout(function(){chkNum();}, 500);
$(".t706").on('DOMSubtreeModified', ".t706__carticon-counter", function() {
setTimeout(function(){chkNum();}, 300);
$('div[data-elem-type="image"] .cartcopy').addClass('cartcopyanim');
setTimeout(function(){ $('.cartcopy').removeClass('cartcopyanim');}, 1000);});
$('.cartcopy').click(function(e){e.preventDefault();tcart__openCart();});
});
</script>
<style>
.blkFav{pointer-events:none; }
.favorites_icon , .favorites_total .tn-atom
.favorites_icon_anim {
-webkit-animation: t1002__pulse-anim 0.6s;
animation: t1002__pulse-anim 0.6s;
}
.favorites_icon{
cursor:pointer;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out,-webkit-transform 0.2s ease-in-out;
}
.t1002__wishlisticon { display: none}
</style>
<script>
$( document ).ready(function() {
let emptyFavorites = false; //Скрыть-Показать пустое избранное - true-false
let fIcon = $('.favorites_icon');
let fTotal = $('.favorites_total');
function checkTotal(){
if (window.twishlist === undefined) { return; }
if(!emptyFavorites) $('.favorites_icon, .favorites_total .tn-atom').show();
let nTot = twishlist.total;
$('.favorites_total .tn-atom').text(nTot);
$('.favorites_icon').addClass('favorites_icon_anim');
setTimeout(function(){ $('.favorites_icon').removeClass('favorites_icon_anim');}, 700);
if (nTot==0){
$('.favorites_icon').addClass('blkFav');
if(emptyFavorites) {$('.favorites_icon, .favorites_total .tn-atom').hide()
}else{$('.cartcopy, .cartcopyprice').show()};
}else{
$('.favorites_icon').removeClass('blkFav');
if(emptyFavorites) $('.favorites_icon, .favorites_total .tn-atom').show();
};
};
setTimeout(function(){checkTotal()}, 1000);
$(".t1002").on('DOMSubtreeModified', ".t1002__wishlisticon-counter", function() {
setTimeout(function(){checkTotal()}, 300);
});
$('.favorites_icon').click(function(e){ twishlist__openWishlist() });
});
</script>
<style>
.t1002__product-title {
color: #463224;
}
.t1002__product-amount {
color: #463224;
}
.t706__cartwin-totalamount-wrap {
color: #463224;
}
.t706__cartwin-prodamount-wrap {
color: #463224;
}
.t706__product-title {
color: #463224;
}
.t706__product-amount {
color: #463224;
}
.t706__product-plusminus {
color: #463224;
}
.t706__product-quantity {
color: #463224;
}
</style>
Карта Google
Нажать кружок "Поделиться" и далее встраивание карт. Заменить текст до width="100
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10444.98548011879!2d-80.12315850304788!3d25.944039581630534!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88d9adfed3adb783%3A0x2222852f3f7c2da2!2sKRASA%20BEAUTY%20AND%20NAILS%20BAR!5e0!3m2!1sru!2sru!4v1711442447576!5m2!1sru!2sru" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
Автоскрытие шапки
Создали блок меню (стандарт или ZeroBlock)
Задали ему класс uc-scrollmenu
Добавили нужный код в блок Другое - Т123
Задали ему класс uc-scrollmenu
Добавили нужный код в блок Другое - Т123
<script>
$(document).ready(function(){
let distance = 60; // Дистанция видимости или сткрытия от верха страницы
let startHide = false;// Видно или скрыто при старте true / false
//Создали блок меню (стандарт или ZeroBlock)
//Задали ему класс uc-scrollmenu
//Добавили нужный код в блок Другое - Т123
let menuCl = $('.uc-scrollmenu');
setTimeout(function(){
menuCl.find('.t396__artboard').addClass('menu-st');
if(!startHide){
let top = $(document).scrollTop();
if(top<distance){
menuCl.find('.t396__artboard').addClass('show-menu');
};
};
}, 100);
let scrollPrev = 0;
$(window).scroll(function() {
let top = $(document).scrollTop();
if ( (top > scrollPrev) && (top >= distance) ) {
$('.menu-st').removeClass('show-menu');
}else{
$('.menu-st').addClass('show-menu');
if(startHide && top < distance){
$('.menu-st').removeClass('show-menu');
}else{
$('.menu-st').addClass('show-menu');
};
};
scrollPrev = top;
});
});
</script>
<style>
.menu-st {transition: all 0.4s cubic-bezier(0, 0, 0.8, 1.0)}
.uc-scrollmenu .t396__artboard
{transform: translateY(-100%)}
.uc-scrollmenu .t396__artboard.show-menu
{transform: translateY(0%)}
.uc-scrollmenu{
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.uc-scrollmenu { pointer-events:none}
.menu-st.show-menu { pointer-events:all}
</style>
Код для вкладывания pl310 в tx16n (прайс в баян)
Если нужно прайс в баян на другие страницы, то на других страницах создай новый tx16n(или скопируй) а pl310 можно в alias
<!-- Код для вкладывания pl310 в tx16n -->
<style>
.t812__col {
padding: 0 20px;
margin: 0;
box-sizing: border-box;
}
</style>
<script>
$( document ).ready(function() {
let mappings = [
{ txSelector: '#rec725788451', arrPl310: { 0:"#rec724778480" } }, //номер tx16n (на других страницах создай новый tx16n а pl310 в alias) ; номер pl310
{ txSelector: '#rec724866125', arrPl310: { 0:"#rec724862412" } },
{ txSelector: '#rec724873481', arrPl310: { 0:"#rec724872644" } },
{ txSelector: '#rec725100280', arrPl310: { 0:"#rec725100348" } }
];;
mappings.forEach(mapping => {
let tx16n = $(mapping.txSelector);
$.each(mapping.arrPl310, function(key, value) {
let currentElem = tx16n.find('.t585__text:eq('+Number(key)+')');
if (currentElem.length) {
currentElem.html($(value));
}
});
});
});
</script>
Слайдер из zero блоков
Создать отдельный zero только со стрелками, назначить стрелкам классы sliderMi1_right и sliderMi1_left. Вставить код в t123. Слайдеры из zero располагать между 123 и zero со стрелками
<style>
body{overflow-x:hidden}
.sliderMi1_right,
.sliderMi1_left{
z-index: 99999999999 !important;
cursor: pointer;
transition: opacity 0.3s, filter 0.3s;
opacity: 0.6; /*непрозрачность кнопки*/
}
.sliderMi1_right:hover,
.sliderMi1_left:hover {
opacity: 1; /*непрозрачность кнопки при наведение*/
/*ТЕНЬ ПРИ НАВЕДЕНИЕ НА КНОПКУ (МОЖНО МЕНЯТЬ ПОКАЗАТЕЛИ В СКОБОЧКАХ)*/
filter: drop-shadow(#fff 2px 4px 10px); /*<ТЕНЬ*/
}
.sliderMi1_none,
.sliderMi1_none{
/*opacity: 0;*/
height: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden;
}
.sliderMi1_active,
.sliderMi1_active {
opacity: 1 !important;
transform: translate(0, 0) !important;
transition: opacity 1s, transform 0.3s;
overflow: hidden;
}
.sliderMi1Wrap {
background: #e0e6de; /* Замените #ccc на нужный вам цвет (чтобы не моргал блок при смене слайдов*/
}
#e0e6de
</style>
<script>
$(document).ready(function () {
var sliderMi1BtnBlock = '#rec724670191';
var sliderMi1 = $('#rec724669938').nextUntil($(sliderMi1BtnBlock)).not(':hidden').wrapAll('<div class="sliderMi1Wrap"></div>');
var sliderMi1Item = 0;
$('.sliderMi1Wrap').css('background', '');
$(sliderMi1).removeClass('t-rec');
var sliderMi1CenterBtn = 'No';
var sliderMi1CenterBtnWindow = 0;
var sliderMi1Auto = 'Yes';
var sliderMi1AutoTime = 8000;
var sliderMi1LefRigScroll = 'No';
//показ нужного блока
function sliderMi1Active() {
$(sliderMi1).not($(sliderMi1[sliderMi1Item])).addClass('sliderMi1_none').removeClass('sliderMi1_active');
$(sliderMi1[sliderMi1Item]).removeClass('sliderMi1_none').addClass('sliderMi1_active');
};
sliderMi1Active();
//условия скролла
$(sliderMi1BtnBlock).on('click', '.sliderMi1_left', function () {
if(sliderMi1LefRigScroll == 'Yes'){
$('.sliderMi1_none').css('transform','translate(-100%, 0)');
}else{
$('.sliderMi1_none').css('opacity','0');
};
sliderMi1Item--;
if (sliderMi1Item < 0) {
sliderMi1Item = sliderMi1.length - 1;
};
});
$(sliderMi1BtnBlock).on('click', '.sliderMi1_right', function () {
if(sliderMi1LefRigScroll == 'Yes'){
$('.sliderMi1_none').css('transform','translate(100%, 0)');
}else{
$('.sliderMi1_none').css('opacity','0');
};
sliderMi1Item++;
if (sliderMi1Item > sliderMi1.length - 1) {
sliderMi1Item = 0;
};
});
//условие автоматического скролла
if (sliderMi1Auto == 'Yes') {
setInterval(function () {
if(sliderMi1LefRigScroll == 'Yes'){
$('.sliderMi1_none').css('transform','translate(100%, 0)');
}else{
$('.sliderMi1_none').css('opacity','0');
};
sliderMi1Item++;
if (sliderMi1Item > sliderMi1.length - 1) {
sliderMi1Item = 0;
};
sliderMi1Active();
sliderMi1Btn();
sliderMi1TitleActive();
}, sliderMi1AutoTime);
};
//кнопки по центру блока
function sliderMi1Btn() {
if ($(window).width() > sliderMi1CenterBtnWindow && sliderMi1CenterBtn == 'Yes') {
$(sliderMi1BtnBlock +'>div>div').height(0);
var sliderMi1Hieght = $(sliderMi1[sliderMi1Item]).outerHeight();
var sliderMi1CalcHieght = sliderMi1Hieght / 2 + $('.sliderMi1_right').outerHeight() / 2;
$('.sliderMi1_right,.sliderMi1_left').css({ 'transform': 'translateY(-' + sliderMi1CalcHieght + 'px)' });
};
};
setInterval(function(){
sliderMi1Btn();
}, 1000);
//условие при клике на кнопку
$(document).on('click', '.sliderMi1_left, .sliderMi1_right, *', function () {
// setTimeout(function () {
sliderMi1Btn();
// }, 100);
sliderMi1Active();
sliderMi1TitleActive();
});
//добавление "заголовка" для определенного слайда
var sliderMi1Title = $('#rec390906073 > div > div > div > div.t050__descr.t-descr.t-descr_xxl');
function sliderMi1TitleActive() {
// первый слайд
if ($(sliderMi1[0]).hasClass('sliderMi1_active')) {
sliderMi1Title.text('Слайд №1');
};
// второй слайд
if ($(sliderMi1[1]).hasClass('sliderMi1_active')) {
sliderMi1Title.text('Слайд №2');
};
// третий слайд
if ($(sliderMi1[2]).hasClass('sliderMi1_active')) {
sliderMi1Title.text('Слайд №3');
};
if ($(sliderMi1[3]).hasClass('sliderMi1_active')) {
sliderMi1Title.text('Слайд №4');
};
if ($(sliderMi1[4]).hasClass('sliderMi1_active')) {
sliderMi1Title.text('Слайд №5');
};
if ($(sliderMi1[5]).hasClass('sliderMi1_active')) {
sliderMi1Title.text('Слайд №6');
};
if ($(sliderMi1[6]).hasClass('sliderMi1_active')) {
sliderMi1Title.text('Слайд №7');
};
if ($(sliderMi1[7]).hasClass('sliderMi1_active')) {
sliderMi1Title.text('Слайд №8');
};
};
});
</script>
Слайдер из te800 в zero
Создать html в zero и вставить <div class="sliderzero"></div> . Назначить стрелкам классы right-arrow и left-arrow. Вставить код в t123. Слайдеры из zero располагать между 123 и zero со стрелками.
<style>
/*Вместо #rec вписываем id блока со слайдером, иначе стрелки исчезнут у всех галерей и слайдеров в вашем проекте*/
#rec725694357 .t-slds__arrow_container{
/*Скрываем штатные стрелки слайдера*/
display: none;
}
/* te800 закругление краёв, тень и увеличение при наведении */
#rec725694357 .t923__bgimg {
border-radius: 150px;
transition: transform 0.2s;
}
.t923__bgimg:hover {
transform: scale(1.02); /* Немного увеличиваем размер при наведении */
}
</style>
<script>
//Перемещаем слайдер в ZeroBlock в div контейнер с классом sliderzero, не забываем заменить id блока на свой
// Перемещаем #rec725694357 внутрь .sliderzero
$("#rec725694357").appendTo(".sliderzero");
// Добавляем обработчик события для клика на элемент с классом left-arrow
$(".left-arrow").click(function() {
$(".sliderzero .t-slds__arrow-left").trigger("click");
});
// Добавляем обработчик события для клика на элемент с классом right-arrow
$(".right-arrow").click(function() {
$(".sliderzero .t-slds__arrow-right").trigger("click");
});
// устанавливать ширину и высоту элемента с id "rec725694357" равными ширине и высоте элемента с классом "sliderzero"
$(document).ready(function() {
var sliderZeroWidth = $(".sliderzero").width();
var sliderZeroHeight = $(".sliderzero").height();
$("#rec725694357").css({
"width": sliderZeroWidth + "px",
"height": sliderZeroHeight + "px"
});
});
</script>
Второй Слайдер из te800 в zero на одной странице
Создать html в zero и вставить <div class="sliderzero2"></div> . Назначить стрелкам классы right-arrow2 и left-arrow2. Вставить код в t123. Слайдеры из zero располагать между 123 и zero со стрелками.
<style>
/* Скрываем штатные стрелки слайдера для второго блока */
#rec725920876 .t-slds__arrow_container {
display: none;
}
/* te800 закругление краёв, тень и увеличение при наведении */
#rec725920876 .t923__bgimg {
border-radius: 15px;
transition: transform 0.2s;
}
.t923__bgimg:hover {
transform: scale(1.02); /* Немного увеличиваем размер при наведении */
}
</style>
<script>
// Перемещаем слайдер в контейнер для второго блока
$(document).ready(function() {
// Перемещаем #rec725920876 внутрь .sliderzero2
$("#rec725920876").appendTo(".sliderzero2");
// Добавляем обработчик события для клика на элемент с классом left-arrow2
$(".left-arrow2").click(function() {
$(".sliderzero2 .t-slds__arrow-left").trigger("click");
});
// Добавляем обработчик события для клика на элемент с классом right-arrow2
$(".right-arrow2").click(function() {
$(".sliderzero2 .t-slds__arrow-right").trigger("click");
});
// Устанавливаем ширину и высоту элемента с id "rec725920876" равными ширине и высоте элемента с классом "sliderzero2"
var sliderZero2Width = $(".sliderzero2").width();
var sliderZero2Height = $(".sliderzero2").height();
$("#rec725920876").css({
"width": sliderZero2Width + "px",
"height": sliderZero2Height + "px"
});
});
</script>
Вставка другого сайта или большой(длинной) картинки себе на страницу в виде фрейма с прокруткой и масштабированием
<div class='tn-atom tn-atom__html'>
<!-- Начало контейнера для масштабирования с помощью CSS -->
<div style='transform-origin: 0 0; transform: scale(0.5)'>
<!-- Вставка внутри контейнера iframe для отображения веб-сайта -->
<iframe src="https://web-yes.com" width="1440px" height="900px" frameborder="0"></iframe>
</div>
<!-- Конец контейнера для масштабирования -->
</div>
Вставка другого сайта или большой(длинной) картинки себе на страницу в виде фрейма с прокруткой и масштабированием
Для выбора какой градиент использовать радиальный или линейный и их разновидности - посмотреть можно на этом сайте
<style>
// Добавляем номер блока, где нужно добавить градиент или несколько через запятую
#rec493850005, #rec493840353, #rec494606197, #rec493934967 {
// В данном примере радиальный градиент
background-image: radial-gradient(#f2e6ef, #a874b0);
background-repeat: no-repeat;
background-position: center center;
position: relative;
background-attachment: fixed;
background-size: cover;
}
</style>
Кнопка «Назад» (предыдущая страница)
В адрес ссылки для вашей кнопки запишите #back и разместите следующий код:
<!-- Кнопка «Назад» (предыдущая страница) -->
<script>
$('a[href="#back"]').click(function() {
history.back();
return false;
})
</script>
Наезжание нижнего блока на верхний
Наезжание нижнего блока на верхний
$(function(){
/* Укажи id всех блоков через запятую, которым нужно добавить эффект наложения */var id = '#rec320115509,#rec320115547,#rec320115573';
$('head').append('<style>body {overflow-x: hidden;}#allrecords {overflow: visible !important;}#t-header,#t-footer {position: relative;z-index: 2;} .t-rec {position: relative;z-index: 1;overflow-x: hidden;}'+id+' { position: -webkit-sticky; position: sticky; top: 0; z-index: 0;}</style>');
$(window).on('load resize', function(){
$(id).each(function(){
var topPosition = $(window).height() - $(this).height();
if (topPosition < 0) {
$(this).css('top',topPosition)
} else {
$(this).css('top',0)
}
});
});
});
</script>
2 ВИДЕО НА ЭКРАНЕ С КНОПКАМИ
Видео на весь экран с автопроизведением
<div class="video_zero_block">
<div>
<video preload="auto" class="video_source_block" playsinline autoplay loop muted>
<source src="https://drive.google.com/uc?export=download&id=1ltiCbWLxWIHJE6V4P2nBiOmNdIokxvKz">
</video>
</div>
</div>
<style>
.video_zero_block {
display: flex;
justify-content: center;
align-items: center;
height: 850px;
overflow: hidden;
}
.video_zero_block video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 0px;
}
@media screen and (max-width: 600px) {
.video_zero_block {
height: 250px;
}
.video_zero_block video {
transform: none;
}
}
</style>
Плавный скролл страницы
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>
<script>
SmoothScroll({
// Время скролла 400 = 0.4 секунды
animationTime : 800,
// Размер шага в пикселях
stepSize : 75,
// Дополнительные настройки:
// Ускорение
accelerationDelta : 30,
// Максимальное ускорение
accelerationMax : 2,
keyboardSupport : true,
// Шаг скролла стрелками на клавиатуре в пикселях
arrowScroll : 50,
// Pulse (less tweakable)
// ratio of "tail" to "acceleration"
pulseAlgorithm : true,
pulseScale : 4,
pulseNormalize : 1,
touchpadSupport : true,
})
</script>
Cлайдер из карточек магазина st315n и другие
Блоку, из которого будете делать слайдер нужно присвоить класс uc-slider-shop
ТОВАРЫ ОБЯЗАТЕЛЬНО ДОЛЖНЫ ПОДГРУЖАТЬСЯ ИЗ КАТАЛОГА ТОВАРОВ
ДВА И БОЛЕЕ ТАКИХ СЛАЙДЕРОВ НА СТРАНИЦЕ МОГУТ РАБОТАТЬ НЕКОРРЕКТНО
ТОВАРЫ ОБЯЗАТЕЛЬНО ДОЛЖНЫ ПОДГРУЖАТЬСЯ ИЗ КАТАЛОГА ТОВАРОВ
ДВА И БОЛЕЕ ТАКИХ СЛАЙДЕРОВ НА СТРАНИЦЕ МОГУТ РАБОТАТЬ НЕКОРРЕКТНО
script>
const dbmBlock = ".uc-slider-shop"; // класс блока
const catalogGrid = document.querySelector(dbmBlock + ' .js-store-grid-cont');
catalogGrid.addEventListener('tStoreRendered', function() {
if ($(dbmBlock + " .t-store__card").length) {
$(dbmBlock + " .t-store__grid-separator").remove();
$(dbmBlock + " .js-store-grid-cont").slick({
infinite: true, //Бесонечная прокрутка
autoplay: true, //Автопроигрывание
autoplaySpeed: 3000, //Через какое время слайды будут сменяться
speed: 400, // Скорость
pauseOnHover: false, //Пауза при наведении на карточку
pauseOnDotsHover: false, //Пауза при наведении на точки навигации
slidesToShow: 3, //Количество карточек для показа(в настройках блока должно быть такое же количество)
centerMode: false, //Центрирование карточек
//centerPadding: '50px', //Боковые отступы при центрировании карточек
cssEase: 'ease-in-out', //Плавность смены слайдов
arrow: false,
dots: true, //Точки
// slidesToScroll: 1, // Количество карточек, которые пролистываются
swipeToSlide: true, //Пролистывание карточек с помощью мыши без привязки к количеству
//Ссылки на иконки влево и вправо
prevArrow:"<img class='slick-prev' src='https://static.tildacdn.com/tild3466-3038-4438-b232-343039306635/arrow-left.svg'>",
nextArrow:"<img class='slick-next' src='https://static.tildacdn.com/tild3031-3561-4064-a533-323033643532/arrow-right.svg'>",
responsive: [{
breakpoint: 960, //Планшет горизонтальный
settings: {
slidesToShow: 3, //Количество карточек
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 640, //Планшет вертикальный
settings: {
slidesToShow: 2, //Количество карточек
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 480, //Телефон горизонтальный
settings: {
slidesToShow: 1, //Количество карточек
slidesToScroll: 1,
infinite: true,
}
}
]
});
}
});
</script>
<style>
:root{
--borderRadiusContainer: 16px; /*Скругление углов у контейнера*/
--widthIcon: 40px; /*Ширина иконки стрелки*/
--heightIcon: 40px; /*Высота иконки стрелки */
--opacityHover: 0.7; /*Прозрачность стрелок при наведении*/
--tansitionHover: .3s ease-in-out; /*Скорость и плавность анимации при наведении на стрелки*/
--overflow: hidden; /*visible - если нужно, чтобы карточки выходили за предел контейнера*/
--arrowDisplay: block; /*Видимость стрелок навигации, если нужно убрать стрелки пропишите значение none вместо block*/
}
.js-store{
overflow: hidden;
}
.slick-list {
border-radius: var(--borderRadiusContainer) !important;
/*Если нужно, чтобы карточки выходили за предел контейнера*/
overflow:var(--overflow) !important;
}
.slick-arrow{
top:50%;
transform: translateY(-50%);
position:absolute;
cursor:pointer;
display: var(--arrowDisplay) !important;
}
/*Настройка точек навигации*/
.slick-dots{
box-sizing: border-box;
bottom: -50px !important; /*Расстояние вниз от карточек слайдера*/
}
.slick-dots li.slick-active button:before {
color: #269df7 !important; /*Цвет точки активного слайда*/
}
.slick-dots li button:before {
color: #ffffff !important; /*Цвет точек неактивных слайдов*/
font-size: 10px !important; /*Размер точек*/
}
.js-product-img{
top: 0px !important;
}
.slick-dotted.slick-slider {
margin-bottom: 50px !important;
}
/*Десктоп разрешение*/
@media screen and (min-width: 1200px) {
.slick-prev { /*Стрелка влево*/
width: var(--widthIcon) !important;
height: var(--heightIcon) !important;
left: -25px !important; /*Положение стрелки*/
z-index:998;
top:50% !important; /* Расположение стрелки по вертикали*/
}
.slick-next { /*Стрелка вправо*/
width: var(--widthIcon) !important;
height: var(--heightIcon) !important;
right: -25px !important; /*Положение стрелки*/
z-index:998;
top:50% !important; /* Расположение стрелки по вертикали*/
}
.slick-prev:hover, .slick-next:hover{
opacity: var(--opacityHover) !important;
transition: var(--tansitionHover);
}
}
/*Разрешение для вертикального планшета*/
@media screen and (max-width: 960px) {
.slick-prev { /*Стрелка в лево*/
width:30px !important; /*Ширина иконки стрелки влево*/
height:30px !important; /*Высота иконки стрелки влево*/
left: 30px !important; /*Положение стрелки*/
z-index:998;
}
.slick-next { /*Стрелка в право*/
width:30px !important; /*Ширина иконки стрелки вправо*/
height:30px !important; /*Высота иконки стрелки вправо*/
right: 30px !important; /*Положение стрелки*/
z-index:998;
}
}
/*Разрешение для горизонтального телефона*/
@media screen and (max-width: 640px) {
.slick-prev {
left: 10px !important;
z-index: 998 !important;
}
.slick-next {
right: 10px !important;
z-index: 998 !important;
}
}
/*Разрешение для вертикального телефона*/
@media screen and (max-width: 480px) {
.slick-prev {
width: 40px !important;
height: 40px !important;
left: 10px !important;
z-index: 998 !important;
}
.slick-next {
width: 40px !important;
height: 40px !important;
right: 10px !important;
z-index: 998 !important;
}
.slick-dots{
display: block !important;
position: relative !important;
bottom: 16px !important; /*Регулировка отступа снизу*/
padding-left: 0px !important;
width: 100% !important;
}
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>