I'm experiencing an issue with the owl carousel. I want to create a one slide owl carousel, but all my images are displaying as one slide vertically stacked on top of each other instead of horizontally as intended.
<div id="owl-demo" class="projects-slider owl-carousel owl-theme">
<div class="item"><img src="img/lisi1.jpg" alt="lisi"></div>
<div class="item"><img src="img/lisi2.jpg" alt="lisi"></div>
<div class="item"><img src="img/lisi3.jpg" alt="lisi"></div>
<div class="item"><img src="img/lisi3.jpg" alt="lisi"></div>
</div>CSS
.owl-carousel .item img {
display:block;
width:100%;
height:auto;
}
.owl-carousel .item {
margin:0px;
}JS
$(document).ready(function() {
$('.projects-slider').owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
pagination: true,
items: 1,
});
});