常連

swiperを用いてスライダーを実装しております。

理想としては、オートプレイでスライダーが常に動いている状態にしたいのですが、
現状では要素ごとに一旦止まる動作が入ってしまいます。

スライド1　スライド2　スライド3
↓
スライド2　スライド3　スライド4(スライド3が中央に来たあたりで一旦止まってスライドの移動が続く)
↓
スライド3　スライド4　スライド5(スライド4が中央に来たあたりで一旦止まってスライドの移動が続く)

上記の「各スライド要素が中央に来たあたりで一旦止まる動作」を無くしたいです。
speedを変更したり、autoplay内のdelayを1にしたりと試してみましたがどうしてもスライドごとに一旦止まる動作が入ってしまいます。

理想はappleのラインナップのところのようにしたいと考えております(スライドを2行にする必要はございません。あくまで動きの理想です)。

https://www.apple.com/jp/apple-tv-plus/?itscg=10000&itsct=atv-0-tv_fp-hro_lrn-apl-200306

以下が実際に記載しているswiperコードとなります。

ご確認のほど、よろしくお願いいたします。

```JacaScript
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        let mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            speed: 5000,
            autoplay: {
            delay: 0
            },
            loop: true,
            freeMode: true,
            breakpoints: {
                765: {
                    slidesPerView: 2,
                },
                1000: {
                    slidesPerView: 3,
                },
                1200: {
                    slidesPerView: 4,
                },
                1600: {
                    slidesPerView: 5,
                }
            }
        });
    </script>
```

swiperで要素ごとに一旦止まる動作を無くしたい

ゾゾタウンで使われているようなこの商品ページの動きなのですが
http://zozo.jp/sp/shop/mrolive/goods/7972303/?did=21256171&rid=3093
はじめは右側にのみ矢印が現れて手動で最後までいったら右側のボタンがかわり、押したら最初にもどるという動きですが
これはslick.jsで実装可能でしょうか？（最後の画面にいくと現れるグレーアウトして二つのアイコンが現れる動きは不要です）
こちらの件に関して実装方法に詳しい方、 ご教授頂けましたら幸いです。
よろしくお願いいたします。

※スマホのみです。

現在指定しているオプション
fade: false,
infinite: false
arrows: false,
centerMode: true,

slick.jsのカルーセルでループさせずに最後まで行ったら一番最初に戻る

###発生している問題
jQueryのスライダープラグインSlickを利用して自動再生するスライダーを実装しています。
自動再生しつつ、最後のスライドで停止したいと思っているのですが、
自動再生をオンにした際（autoplay:ture）無限ループ（infinite:flase）が効いていません。

afterChangeなどを使った方法で、解決できないかと思ったのですがうまくいきません。
ご教示ください。
###ソースコード
```ここに言語を入力
$(document).ready(function(){
  $('.slider').slick({
  slidesToShow: 1,
  infinite:false,
  autoplay: true,
  pauseOnHover:false,
  autoplaySpeed: 2000,
  arrows: false,
  fade: true
  });
});
```
###slick公式
http://kenwheeler.github.io/slick/

jQueryプラグインSlickのautoplayが止まらない

# 「Uncaught ReferenceError: Swiper is not defined at script.js:1」を解消したい
デモをそのまま引っ張ってきたのですが、そもそもSwiperが定義されていないと出てきてしまいます。
head内と</body>上にはしっかり配置できているのに定義できていない理由がよくわかりません。
分かる方教えてもらえるとありがたいです。
Swiper.js v5.2.1です。
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/script.js"></script>
    <title>Document</title>
</head>
<body>
    
<div class="swiper-container">
	
	<div class="swiper-wrapper">
		
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
    </div>
    <div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

    <script src="js/swiper.min.js"></script>
</body>
</html>
```
```JavaScript
var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    navigation: {
		nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
    }
});
```

Swiper.jsが定義されないのを治したい

Swiper(バージョン8)を使って、親サムネイル（メインのスライド）と子サムネイルを設置しています。子サムネイルをクリックすると、スライドが右から左にスライドしてしまうのですが、本当は、

『子サムネイルをクリックしてもスライドしないようにするけど、クリックしたら親サムネイルに反映はできる。スライドするのはswiperのnextボタンやprevボタンを押した時だけ』

という実装にしたいです。

swiperのオプションなど試しているのですが、どうしても子サムネイルをクリックしたらスライドしてしまいます。また、swiperのオプションに、

simulateTouch: false

を記述して、子サムネイルがクリックしてもスライドしないようにすることはできるのですが、その記述をすると子サムネイルをクリックしても親サムネイルに反映されなくなってしまいます。

下記にスライダー部分の子サムネイル部分のhtmlとscss（親サムネイル部分のhtmlとcssも載せたら文字数オーバーになってしまったため）と、swiperに関するJavascriptのコードを載せさせていただくので、どうすれば子サムネイルがスライドしないようにするかをご教示いただけますと幸いでございます。

スライドは全4枚で、子サムネイルはループさせたいので、loop: true;にしております。

（6年ほど前の記事でも同じような質問がありましたが、2つ紹介用のURLが載せられていて一つが内容がわからずで、もう一つがリンク切れになっていたので、質問させていただきました）

index.html

 ```index.html
<div class="swiper slider-thumbnail">
    <div class="swiper-wrapper">
      
        <div class="p-contents__flex swiper-slide">
           <div class="p-contents__en">
              <img src="./img/contents-en.png" alt="CONTENTS" />
             </div>
             <div class="p-contents__image">
                <img src="./img/contents02.jpg" alt="" />
              </div>
              <div class="p-contents__texts">
                 <h2 class="p-contents__title">
                    1ほげほげ
                   </h2>
                   <p class="p-contents__desc">
        　　　　　2ほげほげ
                    </p>
              <div class="p-contents__tags">
                 <div class="p-contents__tag" style="border: none">
                    #hoge
                 </div>
               </div>

                <a
                        href=""
                        class="p-contents__link c-read-link-two"
                        target="_blank"
                        rel="noopener"
                        >Read more</a
                 >
                  </div>
                </div>
                  
                  <div class="p-contents__flex swiper-slide">
                    <div class="p-contents__en">
                      <img src="./img/contents-en.png" alt="CONTENTS" />
                    </div>
                    <div class="p-contents__image">
                      <img src="./img/contents01.jpg" alt="" />
                    </div>
                    <div class="p-contents__texts">
                      <h2 class="p-contents__title">
                        2ほげほげ
                      </h2>
                      <p class="p-contents__desc">
                       2ほげほげほげ
                      </p>
                      <div class="p-contents__tags">
                        <div class="p-contents__tag" style="border: none">
                          #hoge
                        </div>
                      </div>

                      <a
                        href=""
                        class="p-contents__link c-read-link-two"
                        target="_blank"
                        rel="noopener"
                        >Read more</a
                      >
                    </div>
                  </div>
                  
                  <div class="p-contents__flex swiper-slide">
                    <div class="p-contents__en">
                      <img src="./img/contents-en.png" alt="CONTENTS" />
                    </div>
                    <div class="p-contents__image">
                      <img src="./img/coming.png" alt="" />
                    </div>
                    <div class="p-contents__texts">
                      <h2 class="p-contents__title">3ほげほげ</h2>
                      <p class="p-contents__desc">c3ほげほげほげ</p>
                      <div class="p-contents__tags">
                        
                      </div>

                      <a
                        href=""
                        class="p-contents__link c-read-link-two"
                        target="_blank"
                        rel="noopener"
                        >Read more</a
                      >
                    </div>
                  </div>
                  
                  <div class="p-contents__flex swiper-slide">
                    <div class="p-contents__en">
                      <img src="./img/contents-en.png" alt="CONTENTS" />
                    </div>
                    <div class="p-contents__image">
                      <img src="./img/coming.png" alt="" />
                    </div>
                    <div class="p-contents__texts">
                      <h2 class="p-contents__title">4ほげほげ</h2>
                      <p class="p-contents__desc">4ほげほげほげ</p>
                      <div class="p-contents__tags">
                        
                      </div>

                      <a
                        href=""
                        class="p-contents__link c-read-link-two"
                        target="_blank"
                        rel="noopener"
                        >Read more</a
                      >
                    </div>
                  </div>
                </div>
              </div>
              
              
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
```

```Swiperに関するJavaScript
// 子サムネイルのswiperの記述
const sliderThumbnail = new Swiper(".slider-thumbnail", {
 
  simulateTouch: false, // クリック操作も無効化
  spaceBetween: 20,
  speed: 400,
width:225,
 loop: true,
loopedSlides: 4,
   breakpoints: {
      768: {
    
        loop: true,
				spaceBetween: 30,
				width: 300,
      }
    }
});


//親サムネイルのSwiperの記述
const swiper = new Swiper(".slider", {
  loop: true,
   speed: 400,
effect: "fade", // フェード
fadeEffect: { //フェードによるスライドの重なりを防ぐための記述
    crossFade: true
  },
    breakpoints: {
      768: {
        width: 808,　//widthを指定することでスライドの重なりを回避できたので指定している
      },
      800: {
        width: 840,
      },
      850: {
        width: 890,
      },
      900: {
        width: 940,
      },
    950: {
        width: 990,
      },
      1000: {
        width: 1040,
      },
      1050: {
        width: 1090,
      },
      1100: {
        width: 1107,
      },
    },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: sliderThumbnail,
  },

});
```

以上になります。おわかりになる方いらっしゃいましたら、ご教示いただけますと幸いでございます。

サムネイル付きのSwiperで、サムネイルをクリックするとスライドしてしまうので、スライドさせないようにしたい

### 前提・実現したいこと
CSSのみで、ズームしながらふわっと切り替わるスライドショーを作り、それぞれの画像にリンクを貼り付けたいと思っています。が、画像に<a href="">でリンクをつけると上手く作動しなくなってしまい、リンクにも飛びませんでした（画像が全て同時に出てきてしまいます）。
他の方の質問や色々なページを見て試してみてはいるのですがよくわからず、、、ここで質問させていただきました。大変恐縮ですが、アドバイスいただけますと嬉しいです。

### 該当のソースコード
【CSS】
```
<style>
	/*スライダー*/
 .main_imgSlide {
    width: 400px;
    height: 550px;
    overflow: hidden;
    position: relative; }
  .main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 680px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

  .main_img {
    opacity: 0;
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

@keyframes anime {
    0% {
        opacity: 0; height: auto;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         transform: scale(1.2);
                    z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         -webkit-transform: scale(1.2);
            z-index:9;
    }
    100% { opacity: 0 }
}
</style>
```
【HTML】
```
<div class="main_imgSlide">
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
 </div>
```
### 補足情報（FW/ツールのバージョンなど）

可能であればHTMLとCSSのみで作りたいと思っています。

CSSで作ったスライダーにリンクをつけたい

PowerBIで時系列データの可視化を行っているのですが、範囲を指定してデータを見たいというニーズがありスライダーを使ってデータの範囲を指定して可視化できるようにしたいです。
スライダーの作成まではできたのですが、作成したスライダーが日付粒度でのみ範囲指定できるものができてしまい、もっと細かい時間や分単位のデータを拡大して見たいというニーズに対応できません。
日粒度より細かいタイムスライダーを作成する方法はありますでしょうか？

PowerBIでの日粒度より細かいタイムスライダー作成方法

こんにちは。
画像スライダーなのですが、無限にオートループさせつつ、「次へ」「前へ」の矢印で画像を一枚づつスライドさせたいです。

追記------------------------

・動きのイメージ

下記の様な、画像の連なりがゆっくり横へスライドしてループしている状態で
[https://wakawaka.world/cylinder-back/](https://wakawaka.world/cylinder-back/)

さらに、下記の様に矢印を押すと加速して一枚づつスライドする。（矢印の逆方向も同じく）
[https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/01.html](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>

<div class="swiper-container">
    
    <div class="swiper-wrapper loop">
        
        <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>

    
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>

</div>
</div>


<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>
```