How to insert three images in responsive mobile design sing Owl Carousel

Manideepgoud
Posted by Manideepgoud under Bootstrap category on | Points: 40 | Views : 686
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.

Comments or Responses

Posted by: Annaeverson on: 8/7/2018 Level:Starter | Status: [Member] | Points: 10
nice article

Login to post response