Слайдер управляемый мышкой в Tilda
3 скрипта: сам эффект, его монтаж и настройки. При необходимости, вы можете самостоятельно внести изменения в код.

Настройки эффекта можно произвести по ссылке: https://vincentgarreau.com/particles.js/

В примере использованы блоки:
T123

Скрипт ниже добавляется в блок Т123

<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<!--Основа слайдера  -->
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://i.ibb.co/tCGMzKH/Frame-26-6.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/ZWx7gHp/Frame-26-7.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/1nSsvRQ/Frame-26-8.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/QpJKWDn/Frame-26-9.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/KLb7ggh/Frame-26-10.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/NZ2rBnZ/Frame-26-11.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/C22CQyq/Frame-26-12.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/b7WBKRB/Frame-26-13.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/7CyNFN6/Frame-26-14.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/9yZR53H/Frame-26-15.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/g4BywxJ/Frame-26-16.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/5B8cT4H/Frame-26-17.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/bXDvdP6/Frame-26-18.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/Sy09Nz4/Frame-26-2.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/fNvfG71/Frame-26-3.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/Svdjb4S/Frame-26-4.png" alt=""></div>
<div class="item"><img src="https://i.ibb.co/rvzNx8B/Frame-26-5.png" alt=""></div>


</div>

<style>
/*Стили кнопок слайдеров*/
.prev , .next {
    cursor:pointer;
    padding: 4px;
    height: .5em;
}
img.sliderarrowowl {
    width: 35px;
    margin-top: 15px;
    border-radius: 17px;
    transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
    transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #f0f0f0;
}
.owl-theme .owl-dots .owl-dot span {
    background: #f0f0f0;
}
img.sliderarrowowl:active {
    transform: scale(0.9);
}
.owl-prev , .owl-next{
    display: none !important
}
</style>

<script>
    
    $(document).ready(function() {
//ПРописываем ID нашего блока        
    $('#rec179807016').addClass('scrollowl');
         setTimeout(function() { 
var owl = $('.scrollowl .owl-carousel');
owl.owlCarousel({
    loop:true,
    nav:true,
    margin:40,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },            
        960:{
            items:2
        },
        1200:{
            items:2
        }
    }
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

//Работа кнопок слайдера
 $('.scrollowl .prev').click(function() {
    $(".scrollowl .owl-prev")[0].click();   
  });
  $('.scrollowl .next').click(function() {
    $(".scrollowl .owl-next")[0].click();   
  });

}, 500);
});
    
</script>
Нужна неотложная квалифицированная помощь с интернет-маркетингом?
Made on
Tilda