How to install and use owl carousel mouse wheel animation slider with full source code by jishaansinghal 2022
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>
<style>
body{
background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
height: 70vh;
}
img{
width: 100%;
height: 250px;
}
</style>
</head>
<body>
<div class="owl-carousel owl-theme" style="width: 70%;margin: 120px auto;">
<div class="item"><img src="1.jpg" alt=""></div>
<div class="item"><img src="2.jpg" alt=""></div>
<div class="item"><img src="3.jpg" alt=""></div>
<div class="item"><img src="4.jpg" alt=""></div>
<div class="item"><img src="5.jpg" alt=""></div>
<div class="item"><img src="6.jpg" alt=""></div>
<div class="item"><img src="7.jpg" alt=""></div>
<div class="item"><img src="8.jpg" alt=""></div>
<div class="item"><img src="9.jpg" alt=""></div>
<div class="item"><img src="10.jpg" alt=""></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
var owl = $('.owl-carousel');
owl.owlCarousel({
smartSpeed:250,
loop:true,
nav:true,
margin:10,
responsive:{
0:{
items:1
},
600:{
items:3
},
960:{
items:5
},
1200:{
items:5
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
</script>
</body>
</html>Connect/Contact with me here
Fiverr : https://www.fiverr.com/jishaansinghal
Youtube : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQ
Facebook : https://www.facebook.com/jishaan.singhal
FB Group :https://www.facebook.com/groups/457165385377074
FB Group :https://www.facebook.com/groups/freegigpromotewithjishaansinghal
FB Page :https://www.facebook.com/promoteyourgig
Twitter : https://www.twitter.com/jishaan_singhal
Instagram : https://www.instagram.com/jishaansinghal
Linkedin : https://www.linkedin.com/in/jishaan-singhal-1b77b2203
Blogger : https://jishaansinghal.blogspot.com
keywords:
how to use owl carousel, owl carousel example, owl carousel slider, carousel, owl carousel 2 tutorial, owl carousel tutorial, jquery plugin tutorial, owl carousel 2, owl carousel slider tutorial, owl, how to use owl carousel in your website, how to make a testimonial carousel with owl carousel, owl carousel slider responsive, image slider, slider, bootstrap, jquery tutorial, owl carousel slider example code, owl carousel slider example, jquery plugin, wordpress, jquery slider, owl carousel slider in html, image slider using html and css, owl slider, owl carousel wordpress, owl carousel autoplay, owl carousel image slider, owls, baby owls, cute owl, animals, how to install owl carousel 2, web dev, wordpress carousel, jquery carousel, image carousel, wordpress plugins, carousel slider, javascript slider, bootstrap carousel, how to use owl carousel in bootstrap, divinector, jquery, how to use owl carousel in html, jquery slider plugin, jquery slider tutorial, css slideshow, image slider animation, image slider autoplay, gallery slider, how to use owl carousel 2 slider, html carousel, how to create carousel using owl.js, how to create owl carousel, how to create carousel, owl carousel with bootstrap4, preview and next button owl carousel, how to create a carousel, carousel of progress, how to use owl carousel with bootstrap4 | 2020, owl carousel bootstrap 4, owl carousel installation, 4 ever green, top 10, most beautiful, in the world, on planet earth, what do owls eat, types of owls, colorful birds, most beautiful birds, snowy owl, white, barn owls, facts about owls, owls as pets, great horned owl, court of owls, owl eating, flying birds, beautiful birds videos, night owls, group of owls, funny, cute, pet, pets, animal, funny owls, funny owl, funny owl videos, cute owls, pet owl, owls funny, owl funny, cute owls videos, bird, birds, cuddle, cuddling, baby owl, videos, video, clips, moments, react, reactjs, gallery, react slider, react owl carousel, free react tutorial, free reacts tutorial, how to use owl carousel with html and css | 2020, esponsive image slider, image slider using jquery plugin, responsive image slider using jquery plugin, owl carousel 2.3.4, techmemorise, tech memorise, wordpress carousel plugin, responsive carousel, wordpress plugin, wordpress slider, plug-in, jquery carousel plugin, wordpress image carousel plugin, wordpress carousel widget, plugin wordpress, must have wordpress plugins, best wordpress plugins, top wordpress plugins, best free wordpress plugins, top 10 wordpress plugins, bootstrap cards, bootstrap tutorials, html css slider, css slider, cards slider, full screen slider, full screen slider css, full screen slider html, owl caro, full-screen owl carousel slider with menu, photo carousel, sliders, image slider html and css javascript, owl carousel slider with bootstrap 5, bootstrap 5 owl carousel, owl carousel plugin with bootstrap 5 explained, owl carousel jquery plugin, jquery plugin owl carousel with bootstrap 5, owl carousel jquery plugin explained, how to use owl carousel in bootstrap 5, owl carousel jquery responsive, owl slider bootstrap 5, owl carousel slider with bootstrap 5 full feature, coding river, urdu tutorials, hindi tutorials, xitclub, xitclub tutorials, wpacademy, wordpress tutorial in urdu, wordpress tutorial in hindi, wordpress theme development in urdu, wordpress theme development tutorial in urdu, wp theme development 2018, wp theme development tutorial in urdu, wordpress theme development from scratch, custom carousel wordpress, owl carousel custom navigation, owl carousel wordpress tutorial, psd to html5, psd to html, html5 template, tech tian, how to use owl carousel in 2020, how to use owl carousel 2.3.4, how to use owl carousel in bootstrap 4, testimonial carousel bootstrap 4, bootstrap 4 testimonial carousel, how to create testimonial slider in bootstrap 4, bootstrap testimonial carousel, bootstrap owl carousel testimonial, bootstrap 4, bootstrap 4 carousel, bootstrap 4 carousel multiple items, bootstrap 4 carousel examples, bootstrap 4 carousel multiple items responsive, bootstrap 4 carousel tutorial, bootstrap 4 carousel show 3 items, bootstrap slider examples, bootstrap slider, jquery plugins, jquery owl carousel plugin, owl carousel plugin tutorial, jquery carousel tutorial, how to use owl carousel plugin, jquery plugin for beginners in hindi, jquery tutorial in hindi, jquery tutorial in urdu, yahoo baba, web design tutorial, animated slider tutorial, animated product slider tutorial, animated carousel slider, gallery slider tutorial, bangla wordpress tutorial, web development, freelancing, website development, bangla wordpress theme development, bangla freelancing tutorial, fiverr, upwork, moshiur, codersfoundation, 10 miniute school, ayman sadiq, roasted, exposed, tahseenation exposed, বাংলা নাটক, bangla natok, nobleman, noble roasted, noble exposed, noble, noble scandal, coders foundation, freelancer nasim, jamal sir, jamal sir tutorial, jamal sir protarok, hero alom, how to use owl carousel with html and css | 2021, owl slideshow, slideshow, animated slider, animated carousel, animated slideshow, mouse wheel carousel, mouse wheel slideshow, drag carousel, touch carousel, touch slideshow, touch slider, drag slideshow, drag slider, navigation carousel, pagination carousel, owl carousel in html css javascript, javascript owl carousel, profile card ui design, profile card using html css, html css card design, html css profile card ui, animated profile card in html css, jquery owl carousel, owl carousel card slider in html css javascript, owl carousel image slider javascript, html css3 tutorials, html, css3, responsive owl carousel, responsive image slider, image slider with text, responsive content slider, bootstrap image slider, owl carousel navigation, owl carousel responsive, owl carousel bangla tutorial, html5, owl carousel 2 html5 video, how to use owl carousel in html template, new owl carousel, slider owl carousel, owl carrousel, owl carousel demo, how to add slider owl carrrosul in hindi, web tutorial hindi, testimonial slider, css glassmorphism, glassmorphism ui, glass morphism, css, design, web, bangla, how to use owl carousel slider, image slider html css, owl carousel slider jquery, responsive owl carousel slider html and css, responsive image slider css, responsive owl carousel card slider, coding nepal, how to customize owl carousel nav, how to create slider useing owl carousel, how to convert psd to html in hindi, how to convert html to wordpress in hindi, owl carousel custom navigation arrows, owl carousel slider custom navigation and pagenation, how to use owl carousel plugin in template, how to customize owl carousel dots, onlyfordesigns, only for designs, slider tutorial javascript, owl carousel 2 custom next prev, owl carousel 2 responsive, owl carousel slider responsive autoplay, image slider javascript
Comments
Post a Comment