package.docs.demos.basic.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!



  

    
    
    
    
    
    
    
      Basic Demo | Owl Carousel | 2.3.4
    

    
    
    

    
    
    

    

    

    
    
    
    

    

    
    
    
  
  

    
    
      
        
          
            
              owl.carousel.js 
            
          
          
               
           
          
            
               Home  
              
                Demos 
              
               Docs  
              
                Download 
                 
              
            
          
        
      
    

    
    
      
        
          Basic
        
      
    

    
    
      
        
          
            
              1
            
            
              2
            
            
              3
            
            
              4
            
            
              5
            
            
              6
            
            
              7
            
            
              8
            
            
              9
            
            
              10
            
            
              11
            
            
              12
            
          
          Overview
          Basic usage of Owl Carousel. I used loop:true and margin:10. The structure works with any kind of DOM element. In all of my examples i used <div class="item">...</div> but you could
            put any other element div/span/a/img...
          Setup
          $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
          html
          <div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>
          
        
      
    

    
    
      
        
          
            David Deutsch