package.docs.demos.lazyLoad.html Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of owl.carousel Show documentation
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
The newest version!


  

    
    
    
    
    
    
    
      Lazy Load Demo | Owl Carousel | 2.3.4
    

    
    
    

    
    
    

    

    

    
    
    
    

    

    
    
    
  
  

    
    
      
        
          
            
              owl.carousel.js 
            
          
          
               
           
          
            
               Home  
              
                Demos 
              
               Docs  
              
                Download 
                 
              
            
          
        
      
    

    
    
      
        
          Lazy Load
        
      
    

    
    
      
        
          
            
            
            
              
              
              
            
            
            
            
            
            
            
            
            
          
          Overview
          Add lazyLoad to plugin setup:
          lazyLoad: true
          LazyLoad HTML structure requires class="owl-lazy" and data-src="url_to_img" or/and data-src-retina="url_to_highres_img". If you set above settings not on <img>            but on other DOM element then Owl will load an image into css inline background style. You can even use picture tags with different sources by adding the owl-lazy class to the source tag and a data-srcset attribute.
          Setup
          $('.owl-carousel').owlCarousel({
    items:4,
    lazyLoad:true,
    loop:true,
    margin:10
});
          Option
          If you want to preload images you can also add the option lazyLoadEager to the settings object, where the value indicates how many items to the right (and left, when loop is true) will be pre-loaded.
          HTML:
          <div class="owl-carousel owl-theme">
    <img class="owl-lazy" data-src="https://placehold.it/350x450&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x650&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
  <picture>
      <source class="owl-lazy" media="(min-width: 650px)" data-srcset="https://placehold.it/350x250&text=3-large">
      <source class="owl-lazy" media="(min-width: 350px)" data-srcset="https://placehold.it/350x250&text=3-medium">
      <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3-fallback" alt="">
  </picture>
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
</div>
          
        
      
    

    
    
      
        
          
            David Deutsch