We Keep Coding

How to rewind Glider.js properly

I am trying to make a slider that will scroll to the beginning/end when its respective endpoint is reached. But this code below is not going from the last image to the first. But it is going from the first image to last
<div class="glider-contain">
<div class="glider">
<div>your content here 1</div>
<div>your content here 2</div>
<div>your content here 3</div>
<div>your content here 4</div>
</div>
<button aria-label="Previous" class="glider-prev">«</button>
<button aria-label="Next" class="glider-next">»</button>
</div>
<script>
let slider = new Glider(document.querySelector('.glider'), {
slidesToScroll: 1,
slidesToShow: 1,
draggable: true,
scrollLock: true,
rewind: true,
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
</script>

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,

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>

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>