We Keep Coding

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

Owl-carousel display alot 3 images per item - Laravel

I just started using owl-carousel and i want to display 3 images per item, so i want to make sure laravel will create an item each 3 img displayed in the slide(".item")
here is my Javascript Code
$('.owl-carousel').owlCarousel({
loop:false, // loop over the items
margin:0,
items: 6,
itemsDesktop: [1400, 6],
itemsDesktopSmall: [1100, 4],
itemsTablet: [700, 3],
itemsMobile: [500, 2],
nav:false, // Display the arrow nav of the carousel
dots:false, // Display the dot of the carousel
responsive:{
0:{ // The width of the screen from 0px to 599px
items:2 // How many items you want to display
},
600:{ // The width of the screen from 600px to 999 px
items:3 // How many items you want to display
},
1000:{ // The width of the screen from 1000 px
items:4 // How many items you want to display
}
}
})
and here is my blade
<div class="owl-carousel owl-theme" style="margin-left: 20px">
<div class="item col-md-12">
#foreach ($AsignItems as $ItemOwned)
<div class="lms-cours-item-list">
<img class="img-fluid list-item-img" src="{{ $ItemOwned->image }}" alt="{{ $ItemOwned->log }}" />
</div>
#endforeach
</div>
<div class="item">
#foreach ($Diff as $ItemUnowned)
<div class="lms-cours-badgs-list unowned-item">
<img class="img-fluid list-item-img" src="{{ $ItemUnowned->image }}" alt="{{ $ItemUnowned->alt}}" />
</div>
#endforeach
</div>
</div>
Can you please tell me should i do to get 3 element per item ?
is there any other option ?

You can control how many items will be shown from your js Code:
$('.owl-carousel').owlCarousel({
loop:false, // loop over the items
margin:0,
items: 3,
itemsDesktop: [1400, 3],
itemsDesktopSmall: [1100, 3],
itemsTablet: [700, 3],
itemsMobile: [500, 2],
nav:false, // Display the arrow nav of the carousel
dots:false, // Display the dot of the carousel
responsive:{
0:{ // The width of the screen from 0px to 599px
items:2 // How many items you want to display
},
600:{ // The width of the screen from 600px to 999 px
items:3 // How many items you want to display
},
1000:{ // The width of the screen from 1000 px
items:3 // How many items you want to display
}
}
})
I think this will work for you. And if you like to scroll the items automatically add this
autoplay:true,

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

Move Slick Slider gallery when mouse is on left or right side of page

I am trying to get my gallery to move left when the mouse is on the left side of the page and move right when it is on the right side of the page.
Here is the JSFiddle. I tried to use the hover function but it doesn't work. Mouseover seems to only work when you move the mouse over either on left or right side of the page and mousemove only seems to work when you move the mouse again. I would like it to still move (left or right) when the mouse is stationary (in either left or right side of page), or moved.
$('.carousel-one').on('mouseover', function(e) {
"use strict";
var mouseSide;
if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
$('.carousel-one').slickPrev();
} else {
$('.carousel-one').slickNext();
}
});
$('.carousel-one').slick({
arrows: true,
infinite: true,
speed: 500,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 2000
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
<div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
<div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
</div>

Set pauseOnHover: false,. Hope this helps!
$('.carousel-one').on('mouseover', function(e) {
"use strict";
var mouseSide;
if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
$('.carousel-one').slickPrev();
} else {
$('.carousel-one').slickNext();
}
});
$('.carousel-one').slick({
arrows: true,
infinite: true,
pauseOnHover: false,
speed: 500,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
autoplay: true,
autoplaySpeed: 2000
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="carousel-one">
<div><img src="http://lorempixel.com/400/200" alt="Image three"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image one"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image two"></div>
<div><img src="http://lorempixel.com/320/200" alt="Image four"></div>
<div><img src="http://lorempixel.com/400/200" alt="Image five"></div>
<div><img src="http://lorempixel.com/200/200" alt="Image seven"></div>
<div><img src="http://lorempixel.com/300/200" alt="Image six"></div>
</div>

Video carousel using owl.carousel.js is not working

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>