CODEWITHSUNDEEP
javascriptjqueryhtmlcssowl-carousel
Lei Lionel
Lei Lionel

Reputation: 1273

Slider with owlcarousel

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

Upvotes: 0

Views: 1991

Answers (1)

rby
rby

Reputation: 786

  1. 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>

  1. 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.

Upvotes: 4

Related Questions