A slider library swiper.js that does not require jQuery and works only with javascript.
How to use Swiper
コンテンツ
Below is a brief explanation of how to use Swiper.
Swiper installation
Load Swiper’s javascript. Here, we will use the latest version provided by the CDN.
// CSS
<link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css">
// JavaScript
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide1</div>
<div class="swiper-slide">Slide2</div>
<div class="swiper-slide">Slide3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
Javascript
Create Swiper class and set option.
var Swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
})
Complete.
Demo
https://choppydays.com/static/swiperjs/
The reason why Swiper.js does not work
Option specification differs depending on the Swiper version
// ver 5
var Swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
// ver 4
var Swiper = new Swiper ('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});
Swiper pagenation does not work
When Swiper pagenation does not work by clicking, add the option for pagenation for “clickable” option.
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
demo(fault)
https://choppydays.com/static/swiperjs/prevnextnotworking.html
Swiper may not work properly, such as when installed in WordPress.
As a result of investigation, it was found that the cause may be the CSS included in the default theme “Twenty Twenty” of WordPress.
CSS
* {
transition-duration: 0s !important;
}
If the css is declared in style sheet , Swiper is not working.
If the case , the declaration is removed or the below css is added.
@media ( prefers-reduced-motion: reduce ) {
.sip-slider, .swiper-container, .swiper-wrapper, .swiper-slide, .swiper-slide img{
transition-duration: 100ms !important;
}
}
