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

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

・動きのイメージ

下記の様な、画像の連なりがゆっくり横へスライドしてループしている状態で
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>

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

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

総合スコア36960

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さん！！！！！！！！！！！すごいです！！！本当にありがとうございます。コードの勉強させていただきます。

行動規範の内容に同意します