Video carousel using owl.carousel.js is not working - javascript

Video carousel is not displayed in html page while trying to use owl.carousel.js. Anyone please help me to setup a video carousel in my website.
$('.owl-carousel').owlCarousel({
items:1,
merge:true,
loop:true,
margin:10,
video:true,
lazyLoad:true,
center:true,
responsive:{
480:{
items:2
},
600:{
items:3
}
}
})
<html>
<body>
<div class="owl-carousel owl-theme">
<div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
</body>
</html>

Related

owl carousel stop showing images

Add owl carousel css and js:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css
Owl carousel stop showing images, but earlier it was working correctly. I haven't changed anything in code before.
Here is JavaScript and HTML code:
var carouselLite = function() {
var owl5 = $(".owl-carousel5");
owl5.owlCarousel({
items: 1,
margin: 0,
center: false,
responsiveClass: true,
loop: true,
nav: true,
dots: true,
autoplay: true,
smartSpeed: 500,
responsive:{
0:{
nav:false
},
480: {
nav:false
},
768:{
nav:false
},
1000:{
nav:true,
}
},
navText: [
"<i class='icon-arrow-left owl-direction'></i>",
"<i class='icon-arrow-right owl-direction'></i>"
]
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel5">
<div class="item"><img src="images/draft_duo_1.png" alt="Draft Duo 1"></div>
<div class="item"><img src="images/draft_duo_2.png" alt="Draft Duo 2"></div>
<div class="item"><img src="images/draft_duo_3.png" alt="Draft Duo 3"></div>
<div class="item"><img src="images/draft_duo_4.png" alt="Draft Duo 4"></div>
</div>
This is site photo

Implementing basic working owl.carousel.js in odoo 14

I'am migrating a template from odoo 12 to Odoo 14 and using "owl.carousel" and other JS, and none of them work. I got these errors when implementing owl.carousel :
odoo.define('website_theme.frontend_layout', function (require) {
'use strict';
$('.class1').owlCarousel({
navigation : true,
loop:true,
margin:10,
responsive:{
0:{ items:1
},
1000:{ items:2
},
2000:{
items:3}
}
})
$('.class2').vegasMenu();
});
<div class="d-none d-xl-block header-top">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 col-lg-7">
<div class="class1 owl-carousel owl-theme">
<div class="item">
</div>
<div class="item">
</div>....
Any help please? How can I solve it ?
You missed a comma on the navigation line

Owl Carousel item is fixed when using itemsTablet and itemsMobile

I'm using Owl Carousel 2.2.1 to create an article in a slideshow.
I did these settings to change count of items in different screen sizes:
$(".news").owlCarousel({
items: 4,
itemsDesktopSmall: [990, 3],
itemsTablet: [768, 2],
itemsMobile: [480, 1]
});
But the number of items are always 4!
This is the sample HTML:
<div class="news owl-carousel owl-theme">
<h4>Title 1</h4>
<h4>Title 2</h4>
<h4>Title 3</h4>
<h4>Title 4</h4>
</div>
The real page is here (temporarily):
http://new.khayyamkar.ir
The page is like this in mobile devices:
Try this:
$('.news').owlCarousel({
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
})
Codepen: https://codepen.io/YasirKamdar/pen/BYJENy

owl carousel slide n by n

Using owl carousel and trying to slide items five by five, now i have 5 items, i want when i push next or prev button it move to next five item, currently it move to next item, is it possible?
$('.owl-carousel').owlCarousel({
loop:true,
items:5,
margin:10,
nav:true
})
Demo
i googled and checked plugin website but couldn't find anything.
Use the slideBy options in the owlCarousel config:
$('.owl-carousel').owlCarousel({
loop:true,
items: 5,
margin:10,
slideBy: 5, // slide 5 items
nav:true
})
.item {
background: red;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
You should include slideBy: 5 or slideBy: 'page' option, as they describe it on their documentation.
https://jsfiddle.net/w3ka3vqw/151/

How to make Owl Carusel slider looks like this

How to make my carusel looks like this slider on the picture.
The center image overlapping the two other images.
$('.owl-carousel').owlCarousel({
stagePadding: 10,
loop:true,
margin:0,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
},
1200:{
items:1
}
}
})
and this is the html code
<div class="owl-carousel">
<div class="item"><img src="img/slider1.png" alt="" /></div>
<div class="item"><img src="img/slider1.png" alt="" /></div>
<div class="item"><img src="img/slider1.png" alt="" /></div>
</div>

Categories