I set up Swiper Slider as per the documentation and every slide slides as if one.
<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>
</div>
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 1,
});
I also tested it on CodePen with the same result, so I know it's not something in my project: https://codepen.io/DasRollo/pen/YzzMrgP
Can anyone replicate this?
I had the same problem. In my case I added:
import '../../../node_modules/swiper/css/swiper.min.css';
And it's working.
In my case problem was that I didnt add swiper-slide class for each slider item, so solutiom was just add swiper-slide class
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div> // add "swiper-slide" class!
<div class="swiper-slide">Slide 2</div> // add "swiper-slide" class!
<div class="swiper-slide">Slide 3</div> // add "swiper-slide" class!
</div>
</div>
My swiper settings after npm install swiper
import Swiper, {Navigation} from 'swiper';
import 'swiper/swiper-bundle.css';
Swiper.use([Navigation]);
const swiper = new Swiper('.swiper-container', {
breakpoints: {
768: {
slidesPerView: 2,
},
1440: {
slidesPerView: 3
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 1,
});
If you use webpack check css loaders
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
i was missing ----> import "swiper/css";
In your codepen you forgot to include the css that the plugin also needs to function properly. Not entirely sure if that's what you meant you issue was, but if so, try the code below.
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 1,
});
.swiper-slide {
padding: 2em;
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
<!-- 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>
⚠️⚠️⚠️
Slides can missbehave, resulting into beeing on side 1, if you change their width.
In my example i set the width to 150px. All slides were on side 1. There were 9x additional empty sides. I inspected the slides and saw their automatic set width was crossed. Uncrossing it fixed the problem.
Maybe you also set width on them.
Maybe you set a additonal class on the div element, which sets the width:
I had to set navigation despite I did not need it:
navigation: {
prevEl: null,
nextEl: null,
},
Related
I solved my problem with swiper js.
I am testing the Swiper JS. Now I would like to link from a on my website, open a swiper in an overlay an show the right slide. The number of the slide should be a part of the link.
I would like to set the slide number with a foreach. by click on a link like
Swipe to slide 3 the swiper should start in an overlay on the right slide in an overlay. I would be really happy if you have a solution for this.
To concrete my wish hier some snippets
I have a list of links like
1
2
3
4
5
here is the slider
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">ProductDescription 1 Longform</div>
<div class="swiper-slide">ProductDescription 2 Longform</div>
<div class="swiper-slide">ProductDescription 3 Longform</div>
<div class="swiper-slide">ProductDescription 4 Longform</div>
<div class="swiper-slide">ProductDescription 5 Longform</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
this is the Javascript
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
function btn1() { swiper.slideTo(0,false,false); }
function btn2() { swiper.slideTo(1,false,false); }
function btn3() { swiper.slideTo(2,false,false); }
function btn4() { swiper.slideTo(3,false,false); }
function btn5() { swiper.slideTo(4,false,false); }
</script>
I put in here jsfiddle
<body>
<div class="swiper swiper1">
<!-- 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>
</div>
<div class="newContainer">
<div class="container-wrapper">
<!-- Slides -->
<div class="container-slide">Slide 1</div>
<div class="container-slide">Slide 2</div>
<div class="container-slide">Slide 3</div>
</div>
</div>
</body>
const swiper1 = new Swiper('.swiper1', {
// Optional parameters
direction: 'vertical',
loop: false,
speed: 1000,
preventInteractionOnTransition: true,
mousewheel: {
invert: false,
releaseOnEdges: true,
sensitivity: 0
}
});
swiper.js library
Codepen Link: https://codepen.io/aldrinbright/pen/PoQqgjg
I want the scrolling to stop at Slide 3 and stop scrolling to next slide on its own, then continue to normal scrolling
It is hard to understand exactly what is your desire result.
Anyway by the API this how you dedect slide number 3.
swiper1.on('slideChange', function () {
if(this.activeIndex == "2"){
console.log("slide 3 active");
/* do something */
}
});
Maybe it is helpful.
At first try to use Swiper JS.
I'd connected it from CDN. Using it in my Joomla 4 template, this template using Twitter Bootstrap 5.
This is link: https://club.artcolorit.com/
I need create the same, like in Figma layout: Screenshot
Some problems:
I see navigation, but it didn't working.
I didn't see pagination
It need display 3 slide on the screen, but I see only one.
Javascript
<script>
let swiper = new Swiper(".swiper", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
HTML
<div id="games" class="row">
<div class="col-12">
<h2 class="zag-h2">Наши игры</h2>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1<img src="images/game.jpg" alt="" /></div>
<div class="swiper-slide">Slide 2<img src="images/game.jpg" alt="" /></div>
<div class="swiper-slide">Slide 3<img src="images/game.jpg" alt="" /></div>
</div>
<div class="swiper-pagination"> </div>
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
</div>
</div>
</div>
Help please with these problems. Thanks
Error was in my code.
Script must be in the code below than HTML-elements of the slider. I didn't know about it.
For some reason, I have to use Swiper Slider V4.5.3. I set up a carousel and the content slider, but when clicking the carousel slide item, it should change the active state of the current item, but it doesn't. The active state is always stopped at the first item.
I tried many ways to fix it, but no luck. Even add slideChange event to output the activeIndex value, it always shows 0.
Hope anyone can give me the right direction. Thanks!
var Nav = new Swiper('#nav', {
spaceBetween: 0,
slidesPerView: 4,
watchSlidesVisibility: true,
watchSlidesProgress: true
});
var NavContent = new Swiper('#content', {
spaceBetween: 20,
thumbs: {
swiper: Nav
}
});
.swiper-slide-active {
color: #f00;
}
.swiper-slide {
cursor: pointer;
}
#content {
margin-top: 2em;
}
<script src="https://nybilu.com/sources/swiper.min.js"></script>
<link href="https://nybilu.com/sources/swiper.min.css" rel="stylesheet" />
<div id="nav" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Nav 1</div>
<div class="swiper-slide">Nav 2</div>
<div class="swiper-slide">Nav 3</div>
<div class="swiper-slide">Nav 4</div>
<div class="swiper-slide">Nav 5</div>
</div>
</div>
<div id="content" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Content 1</div>
<div class="swiper-slide">content 2</div>
<div class="swiper-slide">content 3</div>
<div class="swiper-slide">content 4</div>
<div class="swiper-slide">content 5</div>
</div>
</div>
I'm working on a page that contains two vertical sliders. But on clicking down arrow button or on mouse scroll, I want one to slide up words (bottom to top) and the other downwards (top to bottom). How can I implement this?
My code basically looks something like this:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container swiper-container-v swiper-left">
<div class="swiper-pagination swiper-pagination-v"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">Vertical Slide 2</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
<div class="swiper-slide">Vertical Slide 5</div>
</div>
</div>
<div class="swiper-container swiper-container-v2 swiper-right">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">Vertical Slide 2</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
<div class="swiper-slide">Vertical Slide 5</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Script like this:
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
});
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
spaceBetween: 50,
keyboard: {
enabled: true,
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
loop: true,
});
var swiperV2 = new Swiper('.swiper-container-v2', {
direction: 'vertical',
spaceBetween: 50,
keyboard: {
enabled: true,
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
loop: true,
reverseDirection: true
});
If you are using this swiper there is the navigation object you need to add to your configuration.
Something like in the example the guys that are developing the Swiper are reporting in their API:
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
If you want to invert the standard swiping (direction of swipe) you just need to swap the classes that reference your arrows in the configuration.
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-prev',
prevEl: '.swiper-button-next'
}
});