質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

11177閲覧

画像を無限オートループさせつつ矢印でもスライド出来るようしたい

thameat

総合スコア15

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/08/25 09:42

編集2020/08/25 15:12

こんにちは。
画像スライダーなのですが、無限にオートループさせつつ、「次へ」「前へ」の矢印で画像を一枚づつスライドさせたいです。

追記------------------------

・動きのイメージ

下記の様な、画像の連なりがゆっくり横へスライドしてループしている状態で
https://wakawaka.world/cylinder-back/

さらに、下記の様に矢印を押すと加速して一枚づつスライドする。(矢印の逆方向も同じく)
https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/01.html


実装方法の検討がつかないのですが、swiperというスライダーを使用しつつ、CSSのkeyframesでスライドさせてみたのですが、
当然上手くいきませんでした。

僕自身が茫洋としていて、どうすれば実装可能なのかが手がかりが掴めておらず
雑な質問になってしまい大変恐縮ですが、実装方法をお教えいただけないでしょうか。

一応下記がやってみたコードです。

<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <style> .swiper-container { width: 600px; } .swiper-container img{ width: 100%; } .loop { -webkit-animation: loop 50s -25s linear infinite; animation: loop 50s -25s linear infinite; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } @keyframes loop { 0% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } </style> </head> <body> <div> <!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper loop"> <!-- Slides --> <div class="swiper-slide"><img src="./ini/img_01.jpg" alt=""></div> <div class="swiper-slide"><img src="./ini/img_02.jpg" alt=""></div> <div class="swiper-slide"><img src="./ini/img_03.jpg" alt=""></div> </div> <!-- If we need navigation buttons --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> <!-- script --> <script src="https://unpkg.com/swiper/swiper-bundle.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんばんは。

autoplay と loop を使えばいいように思えるのですが、いかがですか?

Autoplay | Swiper Demos
Loop Mode / Infinite Loop | Swiper Demos

コメントを受けて追記

手ごわかったです。
まさか、GitHubのソースを読みにいくことになるとは。

サンプル

js

1var mySwiper = new Swiper('.swiper-container', { 2 direction: 'horizontal', 3 loopPreventsSlide: false, 4 freeMode: true, 5 speed: 5000, 6 autoplay: { 7 delay: 0, 8 }, 9 loop: true, 10}); 11mySwiper.on('slideChangeTransitionEnd', function(swiper){ 12 swiper.autoplay.start(); 13}); 14document.querySelector('.swiper-button-prev').addEventListener('click', function(e){ 15 mySwiper.slideTo(mySwiper.activeIndex -2, 1000); 16}); 17document.querySelector('.swiper-button-next').addEventListener('click', function(e){ 18 mySwiper.slidePrev(1000); 19 mySwiper.slideNext(1000); 20});

css

1 .swiper-wrapper{ 2 transition-timing-function: linear !important; 3 } 4 .swiper-slide img{ 5 width: 100%; 6 }

投稿2020/08/25 09:53

編集2020/08/27 06:12
Lhankor_Mhy

総合スコア36254

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

thameat

2020/08/25 10:07

早速ありがとうございます。 説明不足ですみません。 無限ループしつつ、矢印の「前へ」「次へ」を押した時にスライドのスピードが早くなって欲しいのです。 swiperではないですが、slickというスライダーで下記のurlを参考にやってみたのですが、 ご提案の方法だと矢印の「前へ」「次へ」を押してもスライドの変化がありませんでした。 https://meshikui.com/2018/09/18/982/ (上記ページの「swipe: false,」は一応tureにしました。) 「前へ」「次へ」を押した時にだけスライドスピードやイージングのオプションの値を切り替え出来ないとダメなのかなと思っています。ただその方法がわからないのですが、、、
Lhankor_Mhy

2020/08/25 12:13

「スライドのスピードが早くなって欲しい」とのことですが、スライドしているときに押すとカルーセルの移動速度を上げる、という意味でいいでしょうか? そうすると、途中で矢印からマウスプレスを外すと、移動速度が減速する、ということで合っていますか? また、その場合、スライドしていない状態の場合には何も起こらなくていいということですか? いずれにせよ、質問を編集してほかの回答者にもわかるようにしたほうがいいかと思います。
Lhankor_Mhy

2020/08/25 13:15

あ、もしかして、カルーセルがゆっくり常にスライドしている状態で、矢印を押すと加速or逆回転する、みたいなものを想定していますか?
thameat

2020/08/25 15:09

Lhankor_Mhyさんご指摘ありがとうございます。 質問を編集して、希望の動きを追記しました。 Lhankor_Mhyさんのおっしゃる通りで、「カルーセルがゆっくり常にスライドしている状態で、矢印を押すと加速or逆回転する」を実装したいです。
thameat

2020/08/27 08:47

Lhankor_Mhyさん !!!!!!!!!!! すごいです!!! 本当にありがとうございます。 コードの勉強させていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問