Надёжные помощники современного фермера
Трактора, мотоблоки и навесное оборудование к ним
More products

Как сделать слайдер для товаров из блока ST305N в Tilda

Как выполнили данный пример:

1. Добавили на страницу блок ST305N
2. Добавили в него 10 товаров
3. Сделали настройки :
- Кол-во блоков в ряду 4
- Высота карточек 180 px

4. Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123

В коде заменили:
//Прописываем ID нашего блока с товарами
var myslideID = "#rec66260035";

Также прописали ссылки на иконки для кнопок слайдера:
Левая https://clck.ru/EKCYE
Правая https://clck.ru/EKCZS
<style>
  /*Стиль блокировки кнопки*/
  .blkbutton{
    cursor: default;
    pointer-events: none;
    opacity: 0.3;
}    
  /*Cтиль для левой кнопки*/
  .leftbtn {
    left: -70px;
}
  /*Стиль для правой кнопки*/
   .rightbtn {
    right: -70px;
}
  /*Стиль ждя иконок кнопок*/
  .leftbtn img , .rightbtn img{
    width: 50px;
    height: 100%;
}
  /*Стиль для кнопок*/
  .leftbtn , .rightbtn {
    position: absolute;
    z-index: 99;
    height: 100%;
    cursor:pointer;
    transition: all 0.3s cubic-bezier(0, 0, 0.8, 1.0);
}
   /*Стиль для кнопок при наведении*/
  .leftbtn:hover , .rightbtn:hover {
    background:#f9f9f9;
}      

  /*Настройка родительского контейнера*/
  .shopslider .t776 .t-container {
      position:relative;
  }
  
  /*Стили адаптации*/
  @media screen and (max-width: 1360px){
   .shopslider .t-col_3 {
    max-width: 220px !important;
}}

  @media screen and (max-width: 1360px){
.shopslider  .t-container {
    max-width: 960px !important;
}}

 @media screen and (max-width: 1360px){
.shopslider .t-col {
    margin-left: 10px !important;
    margin-right: 10px !important;
}}
 @media screen and (max-width: 1130px){
 /*Cтиль для левой кнопки*/
  .leftbtn {
    left: -45px;
}
  /*Стиль для правой кнопки*/
   .rightbtn {
    right: -45px;
}}
 @media screen and (max-width: 1085px){
.t776__container_mobile-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
}}

  @media screen and (max-width: 1085px){
.shopslider  .t-container {
    max-width: initial !important;
}}
  @media screen and (max-width: 1085px){
.t776__container_mobile-flex .t776__col {
    min-width: 38% !important;
    max-width: 38% !important;
    margin-bottom: 0px !important;
}}
</style>
<script>
  $( document ).ready(function() {
    //Прописываем ID нашего блока с товарами 
   var myslideID  = "#rec66260035";
  //Добавляем класс к блоку
  $(myslideID).addClass('shopslider');
   //Считаем кол-во карточек в блоке 
   var fullhouse = $(""+myslideID+" .t776__col").length;
  //Скрываем межблочный разделитель
   $(""+myslideID+" .t776__separator").hide();   
   
      //Добавляем кнопки слайдера
   $( ""+myslideID+" .t-container" ).append('<div class="leftbtn"><img src="https://clck.ru/EKCYE" imgfield="img"></div>');
   $( ""+myslideID+" .t-container" ).append('<div class="rightbtn"><img src="https://clck.ru/EKCZS" imgfield="img"></div>');

//Создаём функцию создания слайдера
function createslider(){     
   
   //Блокируем кнопку назад
   $( ".leftbtn" ).addClass('blkbutton');
   
  //Запускаем цикл скрытия лишних карточек для 4 карточек в ряду
  for (var i = 4; i < fullhouse; i++) {
        $(""+myslideID+" .t776__col:eq("+i+")").hide();  };//for
        
  //Объявляем позиции переменные 
  var hideobj = -1;
  var showobj = 3;

//При нажатии на кнопку ВПЕРЁД
  $( ".rightbtn" ).click(function() {
   //Разблокируем кнопку назад
   $( ".leftbtn" ).removeClass('blkbutton');      
    hideobj++;showobj++; 
  
  //Если ещё не прокрутили слайдер до конца
      if(showobj<=fullhouse){ 
  //Скрываем первый товар слева
      $(""+myslideID+" .t776__col:eq("+hideobj+")").hide(); 
  //Показываем новый справа
      $(""+myslideID+" .t776__col:eq("+showobj+")").fadeIn(700);

      };//if(showobj<fullhouse){ 
      //Если прокрутили до конца, то блокируем кнопку вперёд
      if (showobj==fullhouse){
      $( ".rightbtn" ).addClass('blkbutton');};//if (showobj=fullhouse){
});//click forward

 //При нажатии на кнопку НАЗАД
  $( ".leftbtn" ).click(function() {
   //Разблокируем кнопку вперёд
   $( ".rightbtn" ).removeClass('blkbutton');      

  //Если ещё не прокрутили слайдер до начала
      if(hideobj>=0){ 
  //Скрываем  товар справа
      $(""+myslideID+" .t776__col:eq("+showobj+")").hide(); 
  //Показываем товар слева
      $(""+myslideID+" .t776__col:eq("+hideobj+")").fadeIn(700);
  hideobj--;showobj--;
    };// if(hideobj>=0){ 
      //Если прокрутили до начала, то блокируем кнопку назад
      if (hideobj<0){
      $( ".leftbtn" ).addClass('blkbutton');};//if (hideobj<0){
});//click #backto

};//function createslider

//СОБЯТИЯ ДЛЯ СОЗДАНИЯ СЛАЙДЕРА
//Если ширина экрана больше 1085 px
  if ($(window).width() > 1085){
     //Создаём слайдер
     createslider();
  }else{  $(".leftbtn , .rightbtn").hide();
  };  // if ($(window).width() > 1085)
 
 //При изменении размера экрана браузера
 $(window).resize(function(){
   if ($(window).width() <= 1085){
       //Отобразим все карточки
       $(".t776__col").show();
       //Скроем кнопки
       $(".leftbtn , .rightbtn").hide();
       
   }else{ 
       //Покажем кнопки
       $(".leftbtn , .rightbtn").show();
       createslider();

  }; // if ($(window).width() <= 1085)
  
}); //$(window).resize(function(){

});  //  $( document ).ready(function() {

</script>
Made on
Tilda