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>
Related
what i'm trying to do is, change the background color of the selected slide when the link is visited. For example if outdoor link is visited on the new page i would like that slide background to be highlighted so user can understand which section they are in.
<div class="swiper mySwiperAnimationCollection home-page-animation-collection-div">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/outdoor-spaces-furniture" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/outdoor-collection.png?v=1672413080"
alt="Arditi Collection® OUTDOORS">
</a>
<p class="collectionTitleP">OUTDOORS</p>
</div>
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/dining-tables" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/Dining_Tables_Border.png?v=1670939498"
alt="Arditi Collection® DINING TABLES">
</a>
<p class="collectionTitleP">DINING TABLES</p>
</div>
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/dining-chairs" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/Dining_Chairs_Border.png?v=1670939510"
alt="Arditi Collection® DINING CHAIRS">
</a>
<p class="collectionTitleP">DINING CHAIRS</p>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiperAnimationCollection", {
slidesPerView: 10.5,
spaceBetween: 5,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
},
breakpoints: {
320: {
slidesPerView: 3.5,
spaceBetween: 5
},
768: {
slidesPerView: 5.5,
spaceBetween: 5
},
1024: {
slidesPerView: 10.5,
spaceBetween: 5
}
}
});
</script>
The easiest way is by the slide Active Class (API docs):
.swiper-slide.swiper-slide-active{
background: red;
}
Snippet:
var swiper = new Swiper(".swiper", {
slidesPerView: 3,
loop: true,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
.swiper-slide.swiper-slide-active{
background: red;
}
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 {
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;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
[scroll]{
min-height: 100vh;
background: gray;
}
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" rel="stylesheet"/>
<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>
<div class="swiper-pagination"></div>
</div>
I created an auto sliding carousel using swiper js. Now I want to restart the carousel from beginning by clicking a button. How can I do it? Please help.
var swiper2 = new Swiper(".lawnsArtificialTurfSlider", {
initialSlide: 0,
spaceBetween: 10,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".hero-slider-next",
prevEl: ".hero-slider-prev",
}
});
<button onclick="resetSlider()">Reset</button>
const resetSlider = () => { swiper2.reset(); }
On click slide to slide 0 (start) by slideTo method.
/* swiper.slideTo(index, speed, runCallbacks) */
swiper.slideTo(0);
Speed 0 (Moves without animation):
/* swiper.slideTo(index, speed, runCallbacks) */
swiper.slideTo(0,0);
Snippet:
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
/* click event */
document.getElementById("restart").addEventListener("click", restart);
function restart() {
swiper.slideTo(0);
}
html,
body {
position: relative;
height: 100%;
}
#restart{
background: blue;
color: white;
font-size: 2rem;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<button id="restart">Restart</button>
<!-- Swiper -->
<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"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
</script>
There was a big problem with Swiper.js
Is it possible to somehow make the width of the slides equal to the width of the content again?
At the moment, all slides stretch to the full width of the parent, most likely because I set the container grid element
I have been trying to solve the problem for a very long time, but I just can’t tell me I will be grateful!!!
(screenshot attached)
enter image description here
flex-shrink: 100 !important;
width: **set according to your design**;
It works!
As far as I know, there isn't a standard way to make the width of the slides equal to the width of the content.
But, you can specify your desired width for each slide manually in your CSS file as below:
HTML:
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
CSS:
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide {
width: 50%;
}
.swiper-slide:nth-child(2n) {
width: 20%;
}
.swiper-slide:nth-child(3n) {
width: 40%;
}
Also import these two lines of code in your CSS file:
swiper/css
swiper/css/bundle
JS:
const swiper = new Swiper('.swiper', {
speed: 400,
spaceBetween: 100,
});
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 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>