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; } }