常連

こんにちは。
画像スライダーなのですが、無限にオートループさせつつ、「次へ」「前へ」の矢印で画像を一枚づつスライドさせたいです。

追記------------------------

・動きのイメージ

下記の様な、画像の連なりがゆっくり横へスライドしてループしている状態で
[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>
```

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

### 実現したいこと

slickスライダーを、[見本ページ](https://code-step.com/demo/html/media/index.html)のように動かしたい。

### 前提
slickスライダーを使って、スライダーを作ろうとしています。
jQueryや、slickをダウンロードして、リンクを作っています。

### 発生している問題・エラーメッセージ
スライダーの形にはなっているのですが、少しスライドすると、動かなくなってしまいます。
画像間のmarginを開ける命令をしているのですが、反映されません。

ご回答よろしくお願いします。

追記
・少しスライドすると動かなくなる問題は、jQueryのasNavFor: '.slider-for',を削除することで動くようになりました。



### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/slick-theme.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="head-container">
            <div class="logo"><img src="1\logo.svg" alt=""></div>
            <div class="menu"><span></span><span></span><span></span></div>
            
        </div>
        <nav class="menu-in">
            <ul class="menu-in1">
                <li><a href="#PICKUP">PICK UP</a></li>
                <li><a href="">FEATURE</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
            <ul class="menu-in2">
                <li><a href="https://twitter.com/">Twitter</a></li>
                <li><a href="https://www.facebook.com/">facebook</a></li>
                <li><a href="https://www.instagram.com/">instagram</a></li>
                
            </ul>
        </nav>
        <div id="mask"></div>
        
    </header>
    <section>
        <div class="video">
            <video src="1\video (1).mp4"></video>
        </div>
    </section>
    <section>
        <div class="title">
           <h1 id="PICKUP">PICK UP</h1>
        </div>
        <div>
            <ul class="slider">
                <li><div class="inner"><img src="1\pickup1.jpg" alt=""></div></li>
                <li><div class="inner"><img src="1\pickup2.jpg" alt=""></div></li>
                <li><div class="inner"><img src="1\pickup3.jpg" alt=""></div></li>
                <li><div class="inner"><img src="1\pickup4.jpg" alt=""></div></li>
                <li><div class="inner"><img src="1\pickup5.jpg" alt=""></div></li>
                <li><div class="inner"><img src="1\pickup6.jpg" alt=""></div></li>
                <li><div class="inner"><img src="1\pickup7.jpg" alt=""></div></li>
                <li><div class="inner"><img src="1\pickup8.jpg" alt=""></div></li>
                <li><div class="inner"><img src="1\pickup9.jpg" alt=""></div></li>
            </ul>
        </div>
    </section>

    
    <script
    src="https://code.jquery.com/jquery-3.6.4.min.js"
    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="js/slick.min.js"></script>  
    <script src="js/main.js"></script>  
</body>
</html>
```
```CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    width: 100%;
    padding: 20px 40px;
    margin: 0 auto;
    position: relative;
    position: fixed;
    z-index: 10;
}

.head-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.menu {
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 10;
    
}

.menu span {
    position: absolute;  
    border: solid 1px black;
    width: 50%;
}

.menu.is-active span {
    position: absolute;
    border: solid 1px white;
    width: 50%;
}

span:nth-child(1){
    transform: rotate(0deg);
    top: 20px;
    transition: 0.5s;
}
span:nth-child(2){
    top: 30px;
}
span:nth-child(3){
    transform: rotate(0deg);
    top: 40px;
    transition: 0.5s;
}

span.is-active:nth-child(1){
    transform: rotate(315deg);
    top:50%;
    left: 0;
    color: white;
    transition: 0.5s;
}
span.is-active:nth-child(2){
    opacity: 0;
}
span.is-active:nth-child(3){
    transform: rotate(-315deg);
    top:50%;
    left: 0;
    color: white;
    transition: 0.5s;
}

.menu-in { 
    display: block;
    position: absolute;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    z-index: 10;
    background-color: black;
    padding: 60px 25px 20px 25px;
    text-align: left;
    font-size: 0.9rem;
    transition: all 0.5s;

}

.menu-in.is-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    background-color: rgb(0, 0, 0);
    z-index: 3;
    transition: all 0.5s;
    
}

.menu-in1 {
    margin: 0 0 60px 0;
}

.menu-in1 li {
    padding:  22px 0;
    border-bottom: solid 1px white;
}

.menu-in1 li:nth-child(1){
    border-top: solid 1px white;
}

.menu-in1.is-active li {
    color: white;
    padding: 30px;
    margin: 0 auto;
}

.menu-in li {
    list-style: none;
    text-decoration: none;
}

.menu-in.is-active li a {
    color: white;
    list-style: none;
    text-decoration: none
}

.menu-in2 li {
    padding: 5px 0;
}


#mask {
    display: none;
    transition: all 0.5s;
}

#mask.is-active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:aqua;
    opacity: 0.8;
    
}

video {
    padding: 80px 0 0 0 ;
    z-index: 1;
}

.title {
    text-align: center;
    font-size: 24px;
    padding: 80px 0 40px 0;

}

.slider {
    width: auto;
    height: auto;
    justify-content: space-between;
   

}

.inner { 
    list-style: none;
    margin: 50px;
}
```

```jQery
$('.menu').click(function(){
    $('.menu').toggleClass('is-active');
    $('.menu span').toggleClass('is-active');
    $('.menu-in').toggleClass('is-active');
    $('#mask').toggleClass('is-active');
});

$('.menu-in a,#mask').click(function(){
    $('.menu').toggleClass('is-active');
    $('.menu span').toggleClass('is-active');
    $('.menu-in').toggleClass('is-active');
    $('#mask').toggleClass('is-active');
});


$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    
    centerMode: true,
    focusOnSelect: true
  });
    
```

### 試したこと
slickスライダーのオプションの勉強。
コードを消したり追加したりして、挙動を調べています。






slickスライダーがうまく動きません。

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で要素ごとに一旦止まる動作を無くしたい

![イメージ説明](d9c1358ae09253e5cfd1cbef0f25efe9.jpeg)
【実現したいこと】画像のように、Swiperスライドのボタンを外側へ出したいです。

【現状】①ボタンそのものの大きさや幅は、CSSで'.swiper-button-next'　を使い変えることは出来た
②containerをrelative、'.swiper-button-next'にabsoluteを使いtop値から１０pxで指定した所、ボタンが消えて無くなった
③Qiitaや他サイトをくまなく調べたが、解決策をしらべられなかった

【Swiper】[リンク内容](https://idangero.us/swiper/)プラグイン、公式サイト
何をどう足せば外側に出せるでしょうか？
以下のコードの状態で、画像のようなボタンが背景と被ってしまい、外にない状況です。



どんなに小さいこと、ヒントでも頂ければ幸いです。

どうかご教授よろしくお願いいたします。

以下HTML
```javascript Swiper
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>ttt</title>
    
    <link rel="stylesheet" href="big.css">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
    <style type="text/css">
      .swiper-container {
        height: 270px;
        margin:20px 100px;
    
      }
      
      .swiper-slide {
        padding-top: 180px;
        text-align: center;
        color: #fff;
        font-size: 30px;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
</head>




    <div class="swiper-container">
      
      <div class="swiper-wrapper">
        
        <div class="swiper-slide" style="
				background-color: red;
				background-repeat: no-repeat;
				width: 1261px;
				background-size: cover;
				background-position: center center;">
        </div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 2</div>
      </div>
      
      <div class="swiper-pagination"></div>

      
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
.
.
.
略
.
.
.

</body>
  <script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    })
</script>
</html>
```

```以下CSS部分
.swiper-pagination-bullet {
	display: inline-block;
	width:13px !important;
	height:13px !important;
```

【※画像有り】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のカルーセルでループさせずに最後まで行ったら一番最初に戻る

### 前提・実現したいこと
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での日粒度より細かいタイムスライダー作成方法

###発生している問題
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/