In this code, we will let you know how to insert three images in responsive mobile design using owl carousel and make them slide single.
First we need to add images in the html.
For example <body>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
</div>
</body>
In the next step we need to add css for the above html
<style type="text/css">
#owl-demo .item{
background: #42bdc2;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</style>
After adding css, lets add little bit javascript code i.e, for example how many images to display in responsive(mobile, tablet, Desktop).
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true,
items: 6,
navigationText:[];
itemsMobile: [360,3],
itemsTablet: [768,5]
itemsDesktop: [1366,7]
});
});
</script>
That's it we will get images in responsive design of images using owl carousel.