Develop Reference

Can't resize Swiper.js navigation arrows

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>

How to restart swiper slider on clicking button using Javascript?

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>

Add padding to slide for Swiper

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>

Swiper disable half / partial slides on left and right

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.

Vertical Carousel with multiple heights with Javascript (and Swiper.js)

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!