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>
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 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>
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 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'm trying to display the nav buttons outside the swiper container, because of the container overflow: hidden i had to create a wrap with position: relative and position the buttons absolutely.
That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this.
I don't want to initialize multiple sliders with different classes if the slider is the same with different content.
JSFiddle
var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
}
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque 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>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque 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>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
Easy, tiny and tidy.
document.querySelectorAll('.swiper-container').forEach(function(elem) {
new Swiper(elem, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: elem.nextElementSibling.nextElementSibling,
prevEl: elem.nextElementSibling,
}
});
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque 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>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque 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>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
A possible solution is to loop through the elements that contain the slider container, and then grabbing the elements that are required (Swiper, Next Btn, Prev Btn) and using this in the setup for the Swiper.
var x = document.getElementsByClassName("slider-produtos-wrap");
for(var i = 0; i < x.length; i++) {
var el = x[i];
var swiper = el.getElementsByClassName("swiper-container")[0];
var nx = el.getElementsByClassName("swiper-next")[0];
var pr = el.getElementsByClassName("swiper-prev")[0];
new Swiper(swiper, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: nx,
prevEl: pr
}
});
}
JSFiddle
Another way for anyone that might find it useful. Pass in count as a props with a different value for each slider. I did count="1" and count="2". This gives each sliders navigation arrows a different class so they will work independently of each other
<div :class="'swiper-button-prev-' + count" slot="button-prev"></div>
<div :class="'swiper-button-next-' + count" slot="button-next"></div>
props: ['count'],
data() {
return {
swiperOption: {
slidesPerView: 'auto',
spaceBetween: 45,
grabCursor: true,
centerInsufficientSlides: true,
navigation: {
nextEl: `.swiper-button-next-${this.count}`,
prevEl: `.swiper-button-prev-${this.count}`
}
}
}
.swiper-container {
width: 100%;
height: 400px;
padding: 0 50px;
}
.swiper-container::before{
content: "";
display: block;
background: #fff;
left: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}
.swiper-container::after{
content: "";
display: block;
background: #fff;
right: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}