I am using Swiper.js in my project. I want to know the current active slider.
How can I use swiper.activeIndex with an if condition?
Or, I want to write some code for when an expected slider is reached.
Hi what you need to do is to listen for the "slideChange" event of your swiper.
To learn more about the events and apis for swiper please take a look at the documentation: https://idangero.us/swiper/api/
Heres a short example on how to do that:
<script>
var swiper = new Swiper('.swiper-container');
swiper.on('slideChange', function () {
if(this.activeIndex === 1) {
console.log("IM ON SECOND SLIDE!");
alert("IM ON SECOND SLIDE!");
}
});
</script>
Fully working example (Code taken from demo page):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container');
swiper.on('slideChange', function () {
if(this.activeIndex === 1) {
console.log("IM ON SECOND SLIDE!");
alert("IM ON SECOND SLIDE!");
}
});
</script>
</body>
</html>
Related
I have a Swiper but can't resize the navigation arrows for some reason.
.swiper-button-next,
.swiper-button-prev {
color: white !important;
fill: white !important;
stroke: white !important;
width: 10px !important;
height: 10px !important;
}
It does not matter what values I give, the arrows stay the same.
An easy and straightforward solution is to remove the default arrows and use custom ones. To do so, you need:
.swiper-button-prev:after,
.swiper-button-next:after {
display: none;
}
And then have for example an icon for each controller like so:
<div class="swiper-button-next">Custom</div>
<div class="swiper-button-prev">Custom</div>
Here is a working live demo to get an idea:
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
html,
body {
height: 100%;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
display: grid;
place-items:center;
}
.swiper-button-prev:after,
.swiper-button-next:after {
display: none;
}
i{
color:crimson;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"><i class="fa-solid fa-circle-chevron-right fa-2x"></i></div>
<div class="swiper-button-prev"><i class="fa-solid fa-circle-chevron-left fa-2x"></i></div>
</div>
I'd like to add padding to the slide, Swiper offers the parameter spaceBetween for outside the slide ( the wrapper gap ). Now I need padding inside the slide, I've tried adding the padding to .swiper-slide but it broke the whole structure of the swiper.
const swiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
spaceBetween: 30
});
.swiper {
width: 300px;
height: 150px;
background-color: gray;
}
.swiper-slide {
padding: 15px;
background-color: green;
color: white;
}
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
you should give padding and box-sizing: border-box; to your .swiper-slide
do this :
const swiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
spaceBetween: 30
});
.swiper {
width: 100%;
height: 150px;
background-color: gray;
}
.swiper-slide {
background-color: green;
position:relative;
color: white;
padding:20px;
box-sizing: border-box;
}
.padding{
max-width:100%;
background:red;
}
.swiper-wrapper{
width: 100%;
height: 100%;
}
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="padding">Slide 1</div>
<div>example 1</div>
<div>example 2</div>
<div>example 3</div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
I'm creating a vertical slider and I need to have one slide bigger than the others. I usually use Flickity but as it doesn't support Vertical slides, I'm using Swiper.js.
The thing is every row should be the same size but that's not my case. What I've done is to create a cell that is 2x the size of a normal slide, and then track if I'm going to slide to that cell, then move two slides, so I skip one that it's not used.
The problem is that the last one is hidden. I've added one extra and then hidden the last one. I know it's a very tricky solution.
I think there might be better ways so I wanted to ask if you think my solution could be emproved? I attatch you the code:
https://codepen.io/scros/pen/LYVJKrQ
var swiper = new Swiper(".swiper-container", {
direction: "vertical",
slidesPerView: 4,
spaceBetween: 15,
// slidesPerGroup: 2,
cssMode: true,
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
console.log(swiper.params);
swiper.on("slideNextTransitionStart", function() {
console.log("slide changed");
console.log(swiper.activeIndex);
if (swiper.activeIndex === 1) {
swiper.slideTo(2, 700);
}
});
swiper.on("slidePrevTransitionStart", function() {
console.log("slide changed");
console.log(swiper.activeIndex);
if (swiper.activeIndex === 1) {
swiper.slideTo(0, 700);
}
});
.swiper-container {
width: 600px;
height: 500px;
overflow: hidden;
}
.swiper-slide {
border-radius: 0.3rem;
font-size: 18px;
color: white;
background-color: #8ec5fc;
background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
display: flex;
justify-content: center;
align-items: center;
}
.slide1 {
padding: 4rem 0;
}
.wrapper {
background-color: #eef2f7;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>
<div class="wrapper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<h1>Big Slide</h1>
</div>
<div class="swiper-slide slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide"></div>
</div>
</div>
</div>
Thanks!
I need to prevent the last child from having backgroundColor added. The reset box needs to stay white. I don't want to give the reset box a different class just to prevent it from changing color. I need to have the styles not be added. Any help or push in the right direction would be much appreciated. I tried using :not(:last-child) but that didn't seem to work.
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last-child)").css('background-color', boxColor);
});
Heres my code:
$(".btn").click(function () {
boxColor = $(this).val();
$(".box").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").removeAttr('style');
});
body {
background: lightgrey;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 980px;
margin: 0 auto;
}
.col-3 {
flex: 0 0 24.999%;
}
.box {
height: 200px;
max-width: 230px;
margin: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box.red {
background: #E53A40;
}
.box.green {
background: #285943;
}
.box.blue {
background: #6AAFE6;
}
.box.white {
background: white;
}
#media (max-width: 768px) {
.col-3 {
flex: 0 0 100%;
}
.box {
max-width: 100%;
margin-bottom: 1em;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<div class="container">
<div class="col-3">
<div class="box red">
<button class="btn" value="#E53A40">Red</button>
</div>
</div>
<div class="col-3">
<div class="box green">
<button class="btn" value="#285943">Green</button>
</div>
</div>
<div class="col-3">
<div class="box blue">
<button class="btn" value="#6AAFE6">Blue</button>
</div>
</div>
<div class="col-3">
<div class="box white">
<button class="reset" id="reset">Reset</button>
</div>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You should just use the :last element selector on your query.
I think you also might want to just set background color to none instead of removing the whole style attribute, just in case you want to add more css styles to the elements in the future that shouldn't be reset.
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").css('background-color', 'none');
});
You should use :last instead. The :last-child CSS selector consider elements inside the same container:
The :last-child CSS pseudo-class represents the last element among a
group of sibling elements.ref
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").removeAttr('style');
});
body {
background: lightgrey;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 980px;
margin: 0 auto;
}
.col-3 {
flex: 0 0 24.999%;
}
.box {
height: 200px;
max-width: 230px;
margin: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box.red {
background: #E53A40;
}
.box.green {
background: #285943;
}
.box.blue {
background: #6AAFE6;
}
.box.white {
background: white;
}
#media (max-width: 768px) {
.col-3 {
flex: 0 0 100%;
}
.box {
max-width: 100%;
margin-bottom: 1em;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<div class="container">
<div class="col-3">
<div class="box red">
<button class="btn" value="#E53A40">Red</button>
</div>
</div>
<div class="col-3">
<div class="box green">
<button class="btn" value="#285943">Green</button>
</div>
</div>
<div class="col-3">
<div class="box blue">
<button class="btn" value="#6AAFE6">Blue</button>
</div>
</div>
<div class="col-3">
<div class="box white">
<button class="reset" id="reset">Reset</button>
</div>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am using iDangerous Swiper for mobile slider. everything is fine, But I don't know how to load data in slider when user swipe to particular slider div. In short I want to load data on swipe.
Please check the snippet.
Another problem is I also want to load data On click of link, in this case "Slide to 3". I want to retrieve the ID of post using data-post and then I want to load some Ajax data in the current slider div.
So basically what I need i on click of link slide to particular slider and then load data using link attributions. After that if user swipe to another slide then I want to load other data in that slide.
I know its confusing and really sorry for English. :(
Thank you
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slideToClickedSlide:true,
loop: true,
preloadImages: false,
lazyLoading: true
});
$('#btn').click(function(){
var slider = $(this).data("slider");
swiper.slideTo(slider, 1000, false);
})
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Swiper -->
<div class="swiper-container">
<div>
Slide to 3
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>