| Views : | 3678 |
| Skills : | HTML, CSS, JavaScript, Jquery |
| Category : | slider |
| Tag : | Owl Carousel, Carousel, Slider |
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.
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.
To add Owl Carousel in your web page, please add below css and jquery link in between <head> </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.
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 : Show Single slide at one time, with dot and arrow.
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 Shows 3 slide at one time, with dot and arrow.
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 Shows 4 slide at one time, without dot and arrow.
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 Shows 2 item per slide at one time, With Image And Text.
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 Shows 4 slide at one time, , With Image And Text.
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 Shows 4 slide at one time, without dot and arrow.
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 Shows 8 images per slide at one time, with dot and arrow.
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
}
}
});
})
<>
<>
<>
gurhan destan
Thank You