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>
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 have a swiper slider with Module Mousewheel control, is there a possibility make it so that at the end of the scroll slides (last slide) the page continue to scroll.
let swiper = new Swiper(".mySwiper", {
speed: 600,
direction: 'vertical',
parallax: false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
mousewheel: {
sensitivity: 1,
}
});
YES.
By Mousewheel API module option:
releaseOnEdges
false by deafult.
mousewheel: {
releaseOnEdges: true,
},
Set to true and swiper will release mousewheel event and allow page
scrolling when swiper is on edge positions (in the beginning or in the
end). Docs
DEMO:
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 30,
mousewheel: {
releaseOnEdges: true,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
swiper.on('reachEnd', function () {
console.log('slider reachEnd');
});
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-flex;
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"
/>
<!-- Demo styles -->
<style>
</style>
</head>
<body>
<!-- Swiper -->
<p style="min-height: 100vh">Scroll</p>
<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>
<br><br>
<h1>releaseOnEdges API option</h1>
<br><br>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</body>
</html>
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 trying to disable partial / half slides which show on the left and right of Swiper. I want it to show only full slides and not any incomplete slides
var swiper = new Swiper(".swiper-container", {
slidesPerView: 'auto',
preventClicksPropagation: false,
loop: true,
slidesPerGroup: 1,
loopPreventsSlide: false,
centeredSlides: true,
centeredSlidesBounds: true,
setWrapperSize: true,
spaceBetween: 20,
// init: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
});
This is my html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card-content">Hello</div>
</div>
</div>
</div>
</div>
Here is a code example that does what I believe you are looking for:
new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 5,
centeredSlides: true,
spaceBetween: 30,
loop: true,
loopedSlides: 7,
watchSlidesVisibility: true,
breakpoints: {
1028: {
slidesPerView:3,
spaceBetween: 30,
},
480: {
slidesPerView:1,
spaceBetween: 10,
}
}
});
html, body {
position: relative;
height: 100%;
}
body {
background: blue;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
padding: 4em 0;
}
.container{
margin: 0 auto;
height: 100%;
padding: 0 4em;
overflow: hidden;
}
.slider-wrap {
overflow: hidden;
height: 100%;
width: 100%;
background: red;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
opacity: 0;
}
.swiper-container {
overflow: visible;
}
.swiper-slide-visible {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<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>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
All credit to Fabian's codepen here:
https://codepen.io/bitpunk/pen/ZEGmBom
I modified this codepen to meet your needs.
I'm using Swiper to create a slider that takes up the whole window, minus a few pixels for a bar-- no problem there.
(https://i.imgur.com/2MIJOvs.jpg)
However, as you can see, the image that I put in for the slide (https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) is really enlarged.
How do I make the image show a little more of the width so it doesn't look so enlarged/low quality?
I tried messing with some of the width/height settings in the style/CSS, but either nothing changes or the whole container/wrapper gets messed up.
CSS: (in the html head in a style tag)
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 100%;
}
.swiper-slide img{
min-width:100%;
}
Javascript:
<!-- Swiper JS -->
<script src="swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 8000,
disableOnInteraction: false,
},
loop:true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Here is the little update about fullscreen swiper slider .
var galleryTop = new Swiper('.gallery-top', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 100%;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/js/swiper.js"></script>
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>