<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<!-- Slider main container -->
<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>
<script>
var mySwiper = new Swiper('.swiper-container', {
loop: true,
loopAdditionalSlides: 3,
autoplayDisableOnInteraction: false,
slidesPerView: 1.5,
spaceBetween: 30,
centeredSlides: true,
speed: 1000,
autoplay: 3000,
observer: true,
observeParents: true,
preventClicks: true,
preventClicksPropagation: true,
paginationClickable: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
})
</script>
ページネーション、アローのクリック後にオートプレーが止まるとき。
My swiper with Swiper.js stop autoplay after slide it with finger, why?
autoplaydisableOnInteraction: Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
autoplayDisableOnInteraction: false,
2ループ目以降の2個目のスライドが表示されないとき。
Slide disappear when using loop and centeredSlides
loopAdditionalSlides: Addition number of slides that will be cloned after creating of loop.
loopAdditionalSlides: 3,
レスポンシブで上手く表示されないとき。
Swiper slider not working unless page is resized
observer: Set to true to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides).
observeParents: Set to true if you also need to watch Mutations for Swiper parent elements.
observer: true,
observeParents: true,
ページネーションのドットがクリックできないとき。
clickableClickable: If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type.
paginationClickable: true,
スワイプ中にリンクがクリックされるのを防ぐ。
preventClicks: Set to true to prevent accidental unwanted clicks on links during swiping.
preventClicks: true,
preventClicksPropagation: Set to true to stop clicks event propagation on links during swiping.
preventClicksPropagation: true,
The post Swiper.js スライダー コードまとめ first appeared on risalog.]]>