How to rewind Glider.js properly - javascript

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>

Related

How to resolve Swiperjs Fade Effect loop bug

I am using swiper js according to their API. There are a total of 5 slides, but an error occurs without going directly from the 4th slide to the 5th slide. The 4th slide is divided into 2 times and the 5th slide is not shown and it goes to the 1st slide.
<div class= "swiper-wrapper">
<div class="swiper-slide">
<img src="./images/img01-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-5.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-3.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-4.png" alt="">
</div>
</div>
const slideOption1 = {
effect: 'fade',
speed: 400,
slidesPerView: 'auto',
autoplay: {
delay: 400,
disableOnInteraction: false,
},
// loop:true,
loopedSlides: 5,
loopAdditionalSlides: 5,
};
i tried to
s1.on('slideChange', function() {
if(s1.realIndex == 3) {
s1.slideToLoop(5,400)
}
})

Slick does not allow multiple slides

First slides are working fine. But when i add second slides its now working. I'm changing the className, why its not working? If you help me i will be glad. Thank you
$(document).ready(function() {
$('.sidebar-slick').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 3,
prevArrow: $('.prev1'),
nextArrow: $('.next1')
});
});
$(document).ready(function() {
$('.sidebar-slick2').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 3,
prevArrow: $('.prev2'),
nextArrow: $('.next2')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="sidebar-slick">
<div> Test </div>
<div> Test </div>
<div> Test </div>
</div>
<div class="sidebar-slick2">
<div> Test </div>
<div> Test </div>
<div> Test </div>
</div>

Slick slider to show all elements on desktop but show x amount on screen resize

I have a six images in my slick slider.
On desktop (1200px +) I want to display all images in a row (which works).
At 992px width, I want it to only display 3.
First time using slick slider so I'm unsure if this is the right approach: currently, I have one parent div which is trying to accomplish my goals, but unsure if the correct approach would be to contain two divs:
Div 1 will show all six images in a row and then be hidden at 992px width.
Div 2 will contain the slick slider and be shown at 992px width.
Current approach:
$('.slider').slick({
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
infinite: true,
cssEase: 'linear'
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="slick/slick.min.js"></script>
<div class="showcaseRow py-4" align="center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 img__container justify-content-center align-self-center">
<div class="slider">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
</div>
</div>

You can set breakepoints for responsive
$('.center').slick({
slidesToShow: 6,
slidesToScroll: 6,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});

Why slick slider swipe slides forward, and backward?

I have a slider
<div class="my-projects-slider" id="js-my-projects-slider">
<div class="my-projects-slider__item"><img src="assets/i/projects/2.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/3.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/4.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/5.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/6.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/7.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/8.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/9.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/2.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/3.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/4.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/5.jpg" alt=""></div>
<div class="my-projects-slider__item"><img src="assets/i/projects/6.jpg" alt=""></div>
And the js code
$('#js-my-projects-slider').slick({
dots: false,
slidesToShow: 8,
slidesToScroll: 2,
arrows: true,
responsive: [{
breakpoint: 1600,
settings: {
slidesToShow: 7
}
},
{
breakpoint: 1400,
settings: {
slidesToShow: 6
}
},
{
breakpoint: 1200,
settings: {
slidesToShow: 5
}
},
{
breakpoint: 1000,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 500,
settings: {
slidesToShow: 3,
arrows: false
}
}
]
});
I mean to scroll just 2 slides when i click arrow.
But when i press first time is swipe 2 slides forward, second time - 2 slides forward, and when i click 3 time - swipe some slides backward.
What is the reason?
This is the site [enter link description here]my-site1
The slider under the russia map
Thansk

I understand whats happend.
I have 13 slides and scrolling by 2. This is the reason.
I change slides to 14 and it works.

Asynchronous owl carousel in one page

I have 3 carousels on my page with the same class name.
<div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="assets/fullimage1.jpg"></div>
<div class="item"><img src="assets/fullimage2.jpg"></div>
</div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="assets/fullimage3.jpg"></div>
<div class="item"><img src="assets/fullimage4.jpg"></div>
</div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="assets/fullimage5.jpg"></div>
<div class="item"><img src="assets/fullimage6.jpg"></div>
</div>
</div>
and then on my js
$(".owl-carousel ").owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade"
});
This works fine, but all the carousels start almost on the same time. Is there a way to add a delay between the carousels? So first start the first one, and then when the first one is done, the second starts etc...
Thank you in advance.

Combining Phil & TJ answers:
$(".owl-carousel ").each(function(i,v){
var delay = i*10000;
$(v).owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade",
autoPlay: delay
});
});

You can use a timeout like this:
$(".owl-carousel ").each(function(i,elm){
var delay = i*1000; // generate the delay somehow as you need
setTimeout((function(){
var $elm = $(elm);
return function(){
$elm.owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade"
});
}
})(),delay);
});

I suggest you add an ID to each of your carousel and give them each a seperated autoPlay attribute. This way they will start over at different times and when you click ONE carousel it will not move the others.
Yours will tick each carousel when once is clicked.
<div>
<div class="owl-carousel owl-theme" id="owl1">
<div class="item"><img src="assets/fullimage1.jpg"></div>
<div class="item"><img src="assets/fullimage2.jpg"></div>
</div>
<div class="owl-carousel owl-theme" id="owl2">
<div class="item"><img src="assets/fullimage3.jpg"></div>
<div class="item"><img src="assets/fullimage4.jpg"></div>
</div>
<div class="owl-carousel owl-theme" id="owl3">
<div class="item"><img src="assets/fullimage5.jpg"></div>
<div class="item"><img src="assets/fullimage6.jpg"></div>
</div>
</div>
$("#owl1").owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade",
autoPlay: 10000;
});
$("#owl2").owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade",
autoPlay: 7000;
});
$("#owl3").owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade",
autoPlay: 5000;
});

Categories