teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コメントを受けて追記

2020/08/27 06:12

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37463

answer CHANGED
@@ -3,4 +3,43 @@
3
3
  autoplay と loop を使えばいいように思えるのですが、いかがですか?
4
4
 
5
5
  [Autoplay | Swiper Demos](https://swiperjs.com/demos/#autoplay)
6
- [Loop Mode / Infinite Loop | Swiper Demos](https://swiperjs.com/demos/#loop_mode_infinite_loop)
6
+ [Loop Mode / Infinite Loop | Swiper Demos](https://swiperjs.com/demos/#loop_mode_infinite_loop)
7
+
8
+ # コメントを受けて追記
9
+
10
+ 手ごわかったです。
11
+ まさか、GitHubのソースを読みにいくことになるとは。
12
+
13
+ [サンプル](https://jsfiddle.net/Lhankor_Mhy/b8f97krc/)
14
+
15
+ ```js
16
+ var mySwiper = new Swiper('.swiper-container', {
17
+ direction: 'horizontal',
18
+ loopPreventsSlide: false,
19
+ freeMode: true,
20
+ speed: 5000,
21
+ autoplay: {
22
+ delay: 0,
23
+ },
24
+ loop: true,
25
+ });
26
+ mySwiper.on('slideChangeTransitionEnd', function(swiper){
27
+ swiper.autoplay.start();
28
+ });
29
+ document.querySelector('.swiper-button-prev').addEventListener('click', function(e){
30
+ mySwiper.slideTo(mySwiper.activeIndex -2, 1000);
31
+ });
32
+ document.querySelector('.swiper-button-next').addEventListener('click', function(e){
33
+ mySwiper.slidePrev(1000);
34
+ mySwiper.slideNext(1000);
35
+ });
36
+ ```
37
+
38
+ ```css
39
+ .swiper-wrapper{
40
+ transition-timing-function: linear !important;
41
+ }
42
+ .swiper-slide img{
43
+ width: 100%;
44
+ }
45
+ ```