Как загружать только один итем в слайдер

Question

типа лейзи лоада как тут - https://besmart.ua (только там owl)

$(document).ready(function() {


    let swiper = new Swiper(".swiper__info", {
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        clickable: true,
        el: ".swiper-pagination",
      },
      allowTouchMove: true,
         breakpoints: {
        768: {
            allowTouchMove: false,
        },
    },
    });
  
  
});

 img  {
   display: block;
   max-width: 100%;
 }

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.9/swiper-bundle.css" rel="stylesheet"/>
 <section class="info">
   <div class="container">
     <div class="info__wrap">
       <div class="swiper swiper__info">
         <div class="swiper-wrapper">
           <div class="swiper-slide info__item ">
             <div class="container container--info">
               <div class="info__content">
                 <h3 class="info__title">title 1</h3>
                 <div class="info__text">
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis dolorum doloribus quaerat qui molestias itaque repellendus amet, explicabo nihil! Odio ut doloribus in corrupti ipsa atque laborum omnis voluptatibus dolore.</p>
                 </div>
               </div>
               <picture class="info__image">
                 <source srcset="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg 2x, https://klike.net/uploads/posts/2019-01/1547365376_1.jpg 1x">
                 <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg" alt="">
               </picture>
             </div>
           </div>
           <!--end info__item-->
           <div class="swiper-slide info__item">
             <div class="container container--info">
               <div class="info__content">
                 <h3 class="info__title">title 2</h3>
                 <div class="info__text">
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi explicabo ipsa reprehenderit doloribus fugit velit dicta voluptatibus tempora quaerat aperiam quas eius, libero veritatis pariatur amet incidunt ducimus laborum, odit?</p>
                 </div>
               </div>
               <picture class="info__image">
                 <source srcset="https://klike.net/uploads/posts/2020-09/1600242017_1.jpg 1x">
                 <img src="https://klike.net/uploads/posts/2020-09/1600242017_1.jpg" alt="">
               </picture>
             </div>
           </div>
           <!--end info__item-->
           <div class="swiper-slide info__item">
             <div class="container container--info">
               <div class="info__content">
                 <h3 class="info__title">title 3</h3>
                 <div class="info__text">
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus vitae laborum dicta sequi odit, perspiciatis praesentium dolore facere, harum delectus possimus repellat atque exercitationem odio incidunt et voluptatem. Quaerat, error.</p>
                 </div>
               </div>
               <picture class="info__image">
                 <source srcset="img/info/info_1_2x.png 2x, https://natworld.info/wp-content/uploads/2018/01/%D0%A1%D0%BE%D1%87%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BC%D1%83-%D0%9F%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0.jpeg 1x">
                 <img src="https://natworld.info/wp-content/uploads/2018/01/%D0%A1%D0%BE%D1%87%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BC%D1%83-%D0%9F%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0.jpeg" alt="">
               </picture>
             </div>
           </div>
           <!--end info__item-->
         </div>
         <!--end swiper-wrapper-->
         <div class="swiper-button-next info__button info__button--next"></div>
         <div class="swiper-button-prev info__button info__button--prev"></div>
       </div>
       <!--end  swiper__info-->

       <div class="swiper-pagination"></div>
     </div>
   </div>
 </section>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.9/swiper-bu

Answer 1

Для самой картинке указываем нужный класс.

    <img class='swiper-lazy src="https://natworld.info/wp-content/uploads/2018/01/%D0%A1%D0%BE%D1%87%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BC%D1%83-%D0%9F%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0.jpeg" alt="">

Путь выносим в data-src для самого же изображение типа src ставим маленькое изображение.

В настройках слайдера. добавляем lazy - подробнее о нем в документации.

const swiper = new Swiper('.swiper', {
  // Disable preloading of all images
  preloadImages: false,
  // Enable lazy loading
  lazy: true,
});

БЛОГ НА HUSL

Как загружать только один итем в слайдер

Ответы (1 шт):