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

Manideepgoud
Posted by Manideepgoud under Bootstrap category on | Points: 40 | Views : 1383
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
Posted by: Denisbill on: 11/4/2018 Level:Starter | Status: [Member] | Points: 10
It's really nice to share it I really need the solution to this problem from a long time. it's great after getting the solution. thank you for sharing this article, Keep share this type of content. https://www.printererrorrepair.com/blog/fix-printer-not-activated-error-code-30/
Posted by: Denisbill on: 12/20/2018 Level:Starter | Status: [Member] | Points: 10
Please visit to the site Assignment Help writing service reviews. This site contains different type of the resume forms, structures and tips, and also helps to give best guidelines about all the resume writing. This is very good and clear one.
https://www.livewebtutors.com/assignment-help
Posted by: Maxwillor on: 12/21/2018 Level:Starter | Status: [Member] | Points: 10
This post is not just informative but impressive also. The post is so convincing that it created an urge to choose Assignment Help Australia services. You can email us at Info@Myassignmenthelpau.Com or Phone Number: +61-2-8005-8227. For More Details Visit :-https://www.myassignmenthelpau.com
Posted by: Kennyong21 on: 12/21/2018 Level:Starter | Status: [Member] | Points: 10
The above information you shared give me a new look at this topic. I am working as a full-time academic writer in myassignmentHelpsg providing Assignment Help Singapore services to college students. Visit : http://www.myassignmenthelpsg.com/
Posted by: Mycoursehelp on: 12/21/2018 Level:Starter | Status: [Member] | Points: 10
Pretty helpful info!! I`m quite sure these types of articles keep the users up to date with the latest information. Your Post is very unique and all information is reliable for new readers.We have an expert’s team for Coursework Help services, our main goal is to help pupils in completing their academic tasks.
Here you can check: http://www.mycoursehelp.com/

Login to post response