常連

### 実現したいこと
swiperを使用して画像をズームフェードで切り替えを行いたく、検索しながらコードを記述してフェード切り替えはできたのですがどうしてもアニメーションのズームが反映されません。
どこが違うのかわからずご教示いただきたいです。

### 発生している問題・分からないこと
アニメーションが反映されない



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

```HTML
<div class ="main-slide">
                <div class="swiper mainview-slide">
                    
                    <div class="swiper-wrapper">
                        
                        <div class="swiper-slide">
                            <div class ="slide-img">
                                <img src="img/jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class ="slide-img">
                                <img src="img.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class ="slide-img">
                                <img src="img.jpg" alt="">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
```

```CSS
/*スライドアニメーション*/
@keyframes zoomUp {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.2);
    }
  }
  
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-activ .swiper-img,
.swiper-slide-prev .swiper-img{
    animation: zoomUp 7s linear 0s 1 normal both; 
}

.mainview-slide .slide-img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

```

```jQuery
$(function(){

  const swiper = new Swiper(".mainview-slide", {
    loop: true,
    effect: "fade",
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
    speed: 2000, 

  });
})
```

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

##### 上記の詳細・結果
[こちらのサイト](https://junpei-sugiyama.com/swiper-zoom/)を見ながら記述しましたが、違いがわかりませんでした。

### 補足
特になし

画像のズームフェードができない

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で作ったスライダーにリンクをつけたい

# 「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が定義されないのを治したい

### 実現したいこと
・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が効かない

### 実現したいこと
画像ではないスライドを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] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

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

### 補足
特になし