Owl Carousel Demo's
Preview Link
Quick Info
| Views : | 5881 |
| Skills : | HTML, CSS, JavaScript, Jquery |
| Category : | slider |
| Tag : | Owl Carousel, Carousel, Slider |
Table of contents
What is Owl Carousel
Owl carousel is a plugin uses as a component throgh which users can show slider in borwser. In Slider users can show their own images and content.
Advantage of Owl Carousel
Owl carousel is a fully responsive. Owl carousel is cutomizable In owl carousel users can insert number of images as per their own choice and change its sytling.
How to Add Owl Carousel In Web Page
To add Owl Carousel in your web page, please add below css and jquery link in between <head> </head> section of your web page.
Copy and paste below code in head section of your web page
main.html
<>
<><>
<><>
Now, We have to add below code where you want to show slider in your web page. Please paste below code in between <body> </body> section of your web page.
Copy And Below Code To Show Owl Carousel in your web page
demo-1.html
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
$(document).ready(function() {
$('.demo-1').owlCarousel({
items:1,
loop:true,
dots: true,
nav:true,
loop:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
});
})
<>
Demo 1 - Single item Full Screen
Demo 1 : Show Single slide at one time, with dot and arrow.
Copy And Below Code To Show Owl Carousel in your web page
demo-1.html
<>
<>
<>
<>Owl Carousel Demo 1<>
<>
<>
<><>
<><>
<>
<>
<>Demo 1<>
<>
<> <> <>
<> <> <>
<> <> <>
<> <> <>
<>
<>
$(document).ready(function() {
$('.demo-1').owlCarousel({
items:1,
loop:true,
dots: true,
nav:true,
loop:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
});
})
<>
<>
<>
Demo 2 - Three item Per Slide
Demo 2 Shows 3 slide at one time, with dot and arrow.
Copy And Below Code To Show Owl Carousel in your web page
demo-2.html
<>
<>
<>
<>Owl Carousel Demo 2<>
<>
<>
<><>
<><>
<>
<>
<>Demo 2<>
<>
<> <> <>
<> <> <>
<> <> <>
<> <> <>
<>
<>
$(document).ready(function() {
$('.demo-2').owlCarousel({
loop:true,
dots: true,
nav:true,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
})
<>
<>
<>
Demo 3 - Four item Per Slide
Demo 3 Shows 4 slide at one time, without dot and arrow.
Copy And Below Code To Show Owl Carousel in your web page
demo-3.html
<>
<>
<>
<>Owl Carousel Demo 3<>
<>
<>
<><>
<><>
<>
<>
<>Demo 3<>
<>
<> <> <>
<> <> <>
<> <> <>
<> <> <>
<>
<>
$(document).ready(function() {
$('.demo-3').owlCarousel({
loop:true,
dots: false,
nav:false,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
});
})
<>
<>
<>
Demo 4 - Two item Per Slide With Image And Text
Demo 4 Shows 2 item per slide at one time, With Image And Text.
Copy And Below Code To Show Owl Carousel in your web page
demo-4.html
<>
<>
<>Project<>
<>
<>
<>
<><>
<><>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<> <> <>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<> <> <>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<> <> <>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<> <> <>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<> <> <>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
$(document).ready(function() {
$('.demo-1').owlCarousel({
loop:true,
dots: true,
nav:false,
margin:40,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:2
}
}
});
})
<>
<>
<>
Demo 5 - Four item Per Slide, With Image And Text
Demo 5 Shows 4 slide at one time, , With Image And Text.
Copy And Below Code To Show Owl Carousel in your web page
demo-5.html
<>
<>
<>Project<>
<>
<>
<>
<><>
<><>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<> <> <>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<> <> <>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<> <> <>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<> <> <>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<> <> <>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<> <> <>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<> <> <>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<> <> <>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
$(document).ready(function() {
$('.demo-5').owlCarousel({
loop:true,
dots: true,
nav:true,
margin:20,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
});
})
<>
<>
<>
Demo 6 - Four item Per Slide
Demo 6 Shows 4 slide at one time, without dot and arrow.
Copy And Below Code To Show Owl Carousel in your web page
demo-6.html
<>
<>
<>
<>Owl Carousel Demo<>
<>
<>
<>
<><>
<><>
<>
<>
<>
<>
<>
<> 1 <>
<> 2 <>
<> 3 <>
<> 4 <>
<> 5<>
<> 6 <>
<> 7 <>
<> 8 <>
<>
<>
$(document).ready(function() {
$('.demo-1').owlCarousel({
loop:true,
dots: true,
nav:true,
loop:true,
autoplay:true,
margin:20,
autoplayTimeout:2000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
});
})
<>
<>
<>
Demo 7 - Eight item Per Slide
Demo 7 Shows 8 images per slide at one time, with dot and arrow.
Copy And Below Code To Show Owl Carousel in your web page
demo-7.html
<>
<>
<>
<>Owl Carousel Demo<>
<>
<>
<>
<><>
<><>
<>
<>
<>
<>
<>
<> 1 <>
<> 2 <>
<> 3 <>
<> 4 <>
<> 5<>
<> 6 <>
<> 7 <>
<> 8 <>
<> 1 <>
<> 2 <>
<> 3 <>
<> 4 <>
<> 5<>
<> 6 <>
<> 7 <>
<> 8 <>
<> 1 <>
<> 2 <>
<> 3 <>
<> 4 <>
<> 5<>
<> 6 <>
<> 7 <>
<> 8 <>
<>
<>
$(document).ready(function() {
$('.demo-7').owlCarousel({
loop:true,
dots: true,
nav:true,
loop:true,
autoplay:true,
margin:20,
autoplayTimeout:2000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:4
},
1000:{
items:8
}
}
});
})
<>
<>
<>
Thank You