Slider with owlcarousel

Question

Im working on a project and I got to a part where I have to realize a slider. As Im not good in JavaScript, I decided to use a plugin named owlcarousel.

The problem I am facing is about the size of the container of the various items. Im unable to give to the container an initial size

I want to do the same thing like the demo: http://www.owlcarousel.owlgraphic.com/demos/basic.html

However what I have done so far is this:

.carousel {
 width: 800px;
}

/*Text over image*/
h2.header {
    bottom: 0;
    position: absolute;
    text-align: center;
 margin: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
 padding: 35px 0px 35px 0px;
 font-family: FeaturedItem;
}
.item {
    position: relative;
 width: 100%;
}

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

.item .overlay {
    position: absolute;
    top:0;
    left:0;
    width:380px;
    height:100%;
    color:white;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>owlcarousel</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
    </head>
 
    <body>
  <div class="carousel">
   <div class="item">
    <img src="images/2.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/1.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/3.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/4.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/5.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/6.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
  </div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script>
   (function($){
 
    $('.carousel').owlCarousel({
     items: 3,
     loop:true,
     margin:10,
     nav:true,
     dots: true,
     responsive:{
      0:{
       items:1
      },
      600:{
       items:3
      },
      1000:{
       items:5
      }
     }
    })
    
   })(jQuery);
  </script>
 </body>
</html>

As you can see, I have set the number of items to 3 by It is not working. Also the dots are not appearing.

Please let me know how I can make the same design with the size of 380px for each item

rby · Accepted Answer · 2016-04-02T01:22:56.407

3

Instead of adding a width attribute on .carousel, you should create another class, say .wrapper and set the width on that. Place div with .carousel and the divs with .item inside your .wrapper div:

CSS

.wrapper { width: 60%; }

HTML

 <div class="wrapper">
   <div class="carousel">
     <div class="item">
         ...
     <div class="item">
   </div>
 </div>

Secondly, to display the dots, you have to either include the default theme CSS, or define CSS for the dots yourself. The default theme CSS is the following:

<link rel="stylesheet" href="owl.theme.default.css">

The dots need width, height, background, etc to display.

edited Apr 02 '16 at 01:22

answered Mar 31 '16 at 22:25

rby

754
6
10

Thanks for providing your help. – Lei Lionel Mar 31 '16 at 23:26
Concerning the dots, I have set them as true but I can not even see them on my page and when I inspect the page, it still the same thing. Kindly help me solve this problem. – Lei Lionel Mar 31 '16 at 23:27
Did you include the default theme CSS? See #2 in my answer - apparently the code part of my answer was not showing before. If you include this CSS, and dots is set true in the JS, you should be able to see the dots on your page. – rby Apr 02 '16 at 01:25
Thanks everything has been set. Hope I can contact you ant time I need your help – Lei Lionel Apr 02 '16 at 11:25
I need your help one more time : `http://stackoverflow.com/questions/36375090/create-a-collage-for-a-carousel-made-with-owlcarousel` – Lei Lionel Apr 02 '16 at 16:15

Slider with owlcarousel

1 Answers1