<link rel="stylesheet" href="css/swiper-bundle.min.css">

  <script src="js/jquery-3.6.4.min.js"></script>

  <script src="js/swiper.js"></script>

  <script src="js/scripts.js"></script>

  <div class="swiper">

    <div class="swiper-wrapper">

      <div class="swiper-slide">Slide 1</div>

      <div class="swiper-slide">Slide 2</div>

      <div class="swiper-slide">Slide 3</div>

      <div class="swiper-slide">Slide 4</div>

      <div class="swiper-slide">Slide 5</div>

      <div class="swiper-slide">Slide 6</div>

      <div class="swiper-slide">Slide 7</div>

      <div class="swiper-slide">Slide 8</div>

      <div class="swiper-slide">Slide 9</div>

      <div class="swiper-slide">Slide 10</div>

    </div>

    <!-- Add Arrows -->

    <div class="swiper-button-next"></div>

    <div class="swiper-button-prev"></div>

  </div>

<script>

var swiper = new Swiper(".swiper", {

autoplay: {

        delay: 4000,

        stopOnLastSlide:true,

        disableOnInteraction: false

        }, // - автопрокрутка

  loop:true, // - бесконечный слайдер

spaceBetween: 20,

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},/*Событие при автоматическом срабатывании*/

on:{

    slideChange:function(){



}

},

//pagination: { el: ".swiper-pagination",},

mousewheel: false,

keyboard: true,

breakpoints: {

// when window width is >= 320px

300: {

slidesPerView: 2,

spaceBetween: 20,

},

// when window width is >= 480px

500: {

slidesPerView: 3,

spaceBetween: 20,

},

// when window width is >= 640px

600: {

slidesPerView: 4,

spaceBetween: 20,

},

},

/*Для отложенной загрузки*/

preloadImages:false,

lazy:{

/*Подгружать на старте

Переключение слайда*/

loadOnTransitionStart:false,

/*Подгрузить предыдущую и следующую картинку*/

loadPrevNext:false,

},

watchSlidesProgress: true,

wathSlidesVisibility: true,

});

</script>

<script>

$(window).resize(function(){

swiper.update();

});

</script>

<div class="swiper-slide"><img alt="" data-src="" src="" title="" class="swiper-lazy"></div>