Currently, I am working on a project that involves implementing a slider. Since I lack expertise in JavaScript, I opted to use a plugin called owlcarousel.
The challenge I'm encountering relates to the sizing of the container for the items. I'm struggling to set an initial size for the container.
I aim to achieve a similar design to the demo showcased here:
However, my progress so far includes:
.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>My attempts to set the number of items at 3 have not been successful. Additionally, the dots are not appearing as expected.
I would greatly appreciate your guidance on achieving the same design with each item sized at 380px.