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.
Related
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)
}
})
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>
I am building a website which uses swiper.js. When I click on a button a small swiper page will display the product details. But it does not scroll on the first page. I need to hover my mouse outside the swiper page and hover it back again to make it scroll. This is what i've tried.
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
keyboard: {
enabled: true,
onlyInViewport: false,
},
mousewheel: {
enabled: true,
invert: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
simulateTouch:false,
});
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Product Details ....
</div>
<div class="swiper-slide">
Stocks ....
</div>
<div class="swiper-slide">
Reviews ....
</div>
</div>
</div>
You may need to set a size on the .swiper-container class.
Here's an example using your code. I added the navigation buttons. Take a look at the CSS that I added below:
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
keyboard: {
enabled: true,
onlyInViewport: false,
},
mousewheel: {
enabled: true,
invert: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
simulateTouch: false,
});
html, body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Product Details ....
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
<div class="swiper-slide">
Stocks ....
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
<div class="swiper-slide">
Reviews ....
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
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
}
}
]
});
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;
});