常連

### 実現したいこと
画像ではないスライドを2枚をslickでレスポンシブに対応するように2枚ずつスライドできるように実装したい

### 発生している問題・分からないこと
PCサイズだと問題ないが、画面サイズを880px以下した際にスライドが途中で切れてしまう形になってしまう。
880px以下の画面でもスライドサイズが自動で縮小して、2スライド分が収まっているようにコーディングしたい。



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

```HTML
      <section class="introductionExample">
        <div class="introductionInner">
          <h2>導入事例</h2>
          <div class="exampleInner">
            <div class="slider">
              <div class="slider-item slider-item01">
                <h3>
                  慢性的な介護士不足が解決し、
                  <span>優秀な人材</span>が確保できるように！
                </h3>
                <p>
                  「CareSend」の登場で、慢性的な介護士不足に頭を抱える問題が解消しました。優秀な介護スタッフが手軽に利用できるため、施設の運営が安定し、利用者のケアに集中できるようになりました。登録型派遣と紹介予定派遣の両方が選択肢として用意され、利用者のニーズに応えることができるのが素晴らしいです。<br>
                  またプラットフォーム上の登録介護士は、私達が普通に採用していたら絶対に巡り会えなかったであろうリーダー人材にも巡り会えましたので、とても満足しています。
                </p>
                <img class="case01" src="img/case01.png" alt="">
              </div>
              <div class="slider-item slider-item02">
                <h3>
                  急な欠員補充から<span>正社員雇用</span>に繋がり、大変助かっています。
                </h3>
                <p>
                  「CareSend」に急なニーズでも対応可能な介護士さんが登録されていることは、本当に心強かったです。その中でも、派遣していただいた介護士さんはとても素晴らしく、紹介予定派遣を経て正社員として採用することになりました。当該介護士の存在は施設全体にとって大きな価値を持っています。<br>
                  今後も積極的に正社員登用を考えておりますので、良い介護士に恵まれることを祈りつつ、利用をさせていただきます。
                </p>
                <img class="case02" src="img/case02.png" alt="">
              </div>
              <div class="slider-item slider-item03">
                <h3>
                  <span>ケアの質が向上！</span> CareSendで利用者満足度も上昇！
                </h3>
                <p>
                  当施設では、長らく介護士不足に悩まされてきました。ある日、急な欠員が発生し、<br>
                  困り果てていた時に、CareSendを利用することにしました。登録型派遣で急遽派遣してもらった介護士は、驚くほどのプロ意識と思いやりを持ち、施設内での業務をスムーズにこなしてくれました。その後、彼女は紹介予定派遣を経て正式に採用され、施設の一員として活躍しています。彼女の尽力により、施設の雰囲気は一変し、利用者の満足度も大幅に向上しました。
                </p>
                <img class="case03" src="img/case03.png" alt="">
              </div>
              <div class="slider-item slider-item04">
                <h3>
                  <span>派遣介護士の質</span>が高く、とても驚きました。
                </h3>
                <p>
                  私たちの施設は、長年にわたり正社員だけで運営してきました。派遣の利用は考えたこともありませんでしたが、ある日、急な人手不足に悩まされ、"CareSend"を試してみることにしました。派遣された介護士は、私たちの期待をはるかに超える素晴らしい仕事ぶりでした。プロ意識や親切さに感動し、施設内の雰囲気が一変しました。<br>
                  私たちは派遣介護士の活用に新たな可能性を見出し、今後は更にその先の「採用」につなげていきたく思っています。
                </p>
                <img class="case04" src="img/case04.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </section>
```

```CSS
.introductionExample {
    width: 100%;
    background-color: #FFFFFF;
    .introductionInner {
        max-width: 1024px;
        height: 664px;
        margin: 0 auto;
        h2 {
            font-size: clamp(1.5rem, 1.312rem + 0.72vw, 2rem);
            text-align: center;
            margin-top: 96px;
        }
        .exampleInner {
            width: 100%;
            margin: 73px 0 49px;
            .slider {
                width: 100%;
                height: auto;
                padding: 0 72px;
                display: flex;
                .slick-list {
                    padding: 20px;
                    width: 950px;
                    margin: -20px;
                }
                .slider-item {
                    width: 405px;
                    height: 488px;
                    margin: 0 35px;
                    padding: 32px 20px 0;
                    border-radius: 30px 0px 30px 0px;
                    box-shadow: 0px 5px 8px 3px #33333340;
                    position: relative;
                    h3 {
                        font-size: clamp(1.125rem, 0.984rem + 0.54vw, 1.5rem);
                        line-height: 1.8;
                        span {
                            color: #007FC6;
                        }
                    }
                    p {
                        font-size: clamp(0.75rem, 0.703rem + 0.18vw, 0.875rem);
                        line-height: 1.8;
                        font-weight: 400;
                        padding: 24px 0 119px;
                    }
                    .case01 {
                        width: 164px;
                        height: 64px;
                    }
                    .case02 {
                        width: 64px;
                        height: 64px;
                    }
                    .case03 {
                        width: 81px;
                        height: 81px;
                    }
                    .case04 {
                        width: 164px;
                        height: 65px;
                    }
                    img {
                        position: absolute;
                        left: 20px;
                        bottom: 20px;
                    }
                }
                .slick-prev,.slick-next {
                    position: absolute;/*絶対配置にする*/
                    z-index: 3;
                    top: 46.5%;
                    height: 34px;
                    width: 34px;
                }
                .slick-prev {
                    left:1.8%;
                    img {
                        width: 34px;
                        height: 34px;
                    }
                }
                .slick-next {
                    right:1.8%;
                    img {
                        width: 34px;
                        height: 34px;
                    }
                }
            }
        }
    }
}
```

```JQuery
    $('.slider').slick({
		autoplay:false,
		infinite: true,
		variableWidth: true,
		slidesToShow: 2,
		slidesToScroll: 2,
		prevArrow: '<div class="slick-prev"><img src="img/arrow-01.png"></div>',//矢印部分PreviewのHTMLを変更
		nextArrow: '<div class="slick-next"><img src="img/arrow-02.png"></div>',//矢印部分NextのHTMLを変更
    });
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
スライドが切れる現象を解消できませんでした。

### 補足
特になし

slickでの2枚スライドの実装の仕方がわからない

### 実現したいこと
PCサイトで縦スライドのSwiperを使って制作しています。
スライド自体は問題ないのですが、テキストをマウスカーソルで選択させたいです

### 発生している問題・分からないこと
文章にマウスカーソルで選ぼうとするとうまくいきません



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

```HTML
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
          <section class="swiper-slide slide1">
            <img src="img/logo.png" alt="art" class="logo1 pc_only">
            <img src="img/logo_s.png" alt="art" class="logo1 sp_only">
          </section>
          <section class="swiper-slide slide2">
            <p class="text1 pc_only">文章テスト文章テスト文章テスト文章テスト </p>
            <p class="text1 sp_only">文章テスト文章テスト文章テスト文章テスト文章テスト</p>
          </section>
          <section class="swiper-slide slide3">
            <p class="text2 pc_only">テスト文章テスト文章テスト文章テスト文章テスト文章 </p>
            <p class="text2 sp_only">テスト文章テスト文章テスト文章テスト文章テスト文章 </p>
          </section>
          <section class="swiper-slide slide4">
            <div class="slide4_2">
            <img src="img/logo.png" alt="art" class="logo2 pc_only">
            <img src="img/logo_s.png" alt="art" class="logo1 sp_only">
            <p class="text3">文章テスト文章テスト文章テスト文章テスト文章テスト</p>
            <p class="text3">テストタイトルテスト文章テスト文章テスト文章テスト文章テスト</p>
            </div>

              <div class="copyright"><adress>Copyright . All Rights Reserved.</adress></div>
          </section>
        </div>
        
        <div class="swiper-pagination"></div>
        
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
      <script src="js/main.js"></script>
</body>
```

```css
body{
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
}

.logo1{
  width:60%;
}
@media screen and (max-width: 430px) {
  .logo1{
    width:90%;
  }
}

.logo2{
  width:100%;
}
@media screen and (max-width: 430px) {
  .logo2{
    width:90%;
  }
}

.swiper-slide{
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content:center;
    background-attachment:scroll;
    background-position:center center;
}

.slide1{
  background: url(../img/pc1.jpg) no-repeat;
  background-attachment:scroll;
  background-position:center center;
}

@media screen and (max-width: 430px) {
  .slide1{
    background: url(../img/sp1.jpg) no-repeat;
    background-size: 100%;
  }
}

.slide2{
  background: url(../img/pc2.jpg) no-repeat;
  background-attachment:scroll;
  background-position:center center;
}


@media screen and (max-width: 430px) {
  .slide2{
    background: url(../img/sp2.jpg) no-repeat;
    background-size: 100%; 
  }
}

.slide3{
  background: url(../img/pc3.jpg) no-repeat;
  background-attachment:scroll;
  background-position:center center;
}


@media screen and (max-width: 430px) {
  .slide3{
    background: url(../img/sp3.jpg) no-repeat;
    background-size: 100%;
  }
}

.slide4{
  background: url(../img/pc4.jpg) no-repeat;
  background-attachment:scroll;
  background-position:center center;  
}


@media screen and (max-width: 430px) {
  .slide4{
    background: url(../img/sp4.jpg) no-repeat;
    background-size: 100%;
  }
}


.slide4_2{
  max-width:530px;
  text-align:left;
}


/* スライダーの高さ指定*/
.swiper-wrapper {
    height: 96vh;
  }

  @media screen and (max-width: 430px) {
    .swiper-wrapper {
      height: 85vh;
    }
  }
  

  /* 矢印の位置調整 */
  .swiper-button-prev {
    left: 50%;
    margin: 0;
    top: 0;
    transform: translate(-50%, 0px) rotate(90deg);
  }
  .swiper-button-next {
    bottom: 0;
    left: 50%;
    margin: 0;
    top: auto;
    transform: translate(-50%, 0px) rotate(90deg);
  }

  /* 矢印一番最初と最後を非表示 */
  .swiper-button-disabled{
    display: none;
  }


  /*ドット表示*/
  .swiper-pagination{
    display: none;
  }

  .text1{
    /* font-weight: bold; */
    color:red;
    /* font-size: 2rem; */
    font-size: 1.5rem;
    line-height: 4rem;
    padding:0 2rem;
  }

  @media screen and (max-width: 430px) {
    .text1{
      font-size: 1.25rem;
      line-height: 2.8rem;
      padding:0 1rem;
    }
  }


  .text2{
    /* font-weight: bold; */
    color:#0025a4;
    /* font-size: 2rem; */
    font-size: 1.5rem;
    line-height: 4rem;
    padding:0 2rem;
  }

  @media screen and (max-width: 430px) {
    .text2{
      font-size: 1.25rem;
      line-height: 2.8rem;
      padding:0 1rem;
    } 
  }


  .text3{
    /* font-weight: bold; */
    color:#00a63c;
    /* font-size: 1.5rem; */
    font-size: 1.2rem;
    line-height: 3rem;
    padding:0 2rem;
  }

  @media screen and (max-width: 430px) {
    .text3{
      font-size: 0.9rem;
      line-height: 2rem;
      padding:0 1rem;
    }
  }


  /*copyright*/
  .copyright{
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 98;
  }

  @media screen and (max-width: 430px) {
    .copyright{
      font-size:0.8rem;0
    }
  }


/* PCスマホ 設定
------------------------------------------------------------*/

.pc_only { display: block; }
.sp_only { display: none; }

@media (max-width: 430px) {
  .pc_only { display: none; }
  .sp_only { display: block; }
}

```

```js
const swiper = new Swiper(".swiper", {
    loop: false, // ループ
    speed: 800, // 少しゆっくり(デフォルトは300)
    mousewheel: true, // マウスホイールでスライド
    direction: "vertical", // 縦方向
    autoplay: { // 自動再生
      delay: 10000, // 10秒後に次のスライド
      disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
      noSwipingSelector: 'p'
    },
    // ページネーション
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 前後の矢印
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },  
    

  });

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
noSwipingSelectorのオプションもやってみたのですが、うまく行きませんでした

$(function(){
    new Swiper ('.swiper-wrapper', {
    effect: "slide",
    loop: true,
    noSwipingSelector: 'p',
    })
});

### 補足
Swiperのテンプレートを使っていることが前提です

Swiperを使っているのですが、テキストが選択できません

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が止まらない

### 前提・実現したいこと
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で作ったスライダーにリンクをつけたい

### 実現したいこと
・slickで作成したスライダーの前後の画像を、centerModeで見せたい
・画像は全て特定のSVGパスでトリミングしている（窓型）
・現状画像は3枚のみ、今後増えていく予定
・スマートフォンは左右の画像が見切れた状態にしたいが、PCでは左右の画像が全て見えており、半透明になっている状態が理想

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-28/cdf910bf-a53c-46c6-b2c3-c1cdbc5936e5.jpeg) ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-28/4bb4e1c8-b15a-499c-8492-1ee9ef0a9bae.jpeg)

### 発生している問題・分からないこと
・現状のコードだとcenterModeを加筆しても左右の画像が表示されない
・要素の横幅が原因だと考えて色々なパターンを試しているが、解決していない

※スライダーアイテムにドロップシャドウをかけたいが、slickが動作すると子要素の幅が変わってしまいシャドウがトリミングされてしまう。こちらについても解決方法が分かる方いましたらご教示いただけますと幸いです。

恐れ入りますが、分かる方いましたら回答よろしくお願いいたします。



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

```HTML
<section class="section-slide">
    <h2 data-title="midashi">見出し<span></span></h2>
    <div class="slick container" id="js_slick">
        <div class="slick item">
            <div class="clip-shadow">
                <img src="xxxx" alt="画像1枚目">
            </div>
            <svg class="svg">
                <clipPath id="clip-path" clipPathUnits="objectBoundingBox"><path d="xxxx"></path></clipPath>
              </svg>
            <p>テキスト</p>
        </div>
        <div class="slick item">
            <div class="clip-shadow">
                <img src="xxxx" alt="画像2枚目">
            </div>
            <p>テキスト</p>
        </div>
        <div  class="slick item">
            <div class="clip-shadow">
                <img src="xxxx" alt="画像3枚目">
            </div>
            <p>テキスト</p>
        </div>
    </div>
</section>
```

```SCSS
.section-slide{
    /* スライド */
    .slick{

        &.container{
            width: 64%;
            margin: 0 auto;

            @include pc {
                width: 30%;
            }
        }

        &.item{
            margin-bottom: 2.0rem;
        }

            .clip-shadow {
                filter:drop-shadow(0.5rem 0.4rem 0 rgba(0, 0, 0, 0.2));
            }

        svg {
            position: absolute;
            width: 0;
            height: 0;
        }

        img {
            width: 100%;
            margin-bottom: 2.0rem;
            -webkit-clip-path:url(#clip-path);
            clip-path:url(#clip-path);
        }

        p {
            display: block;
            font-size: 2.4rem;
            font-weight: 600;
        }
    }
}
```

```JS
$('#js_slick').slick({
  arrows: false,
  dots: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 5000,
  fade: true,
  cssEase: 'linear',
  centerMode: true,
  centerPadding:"20%"
});
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
今のところ、上記と同じエラーが発生しているケースは見つけられていない。

### 補足
特になし

slickのcenterModeが効かない

# 「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'
    }
});
```