常連

# 「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を用いてスライダーを実装しております。

理想としては、オートプレイでスライダーが常に動いている状態にしたいのですが、
現状では要素ごとに一旦止まる動作が入ってしまいます。

スライド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で要素ごとに一旦止まる動作を無くしたい

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

ゾゾタウンで使われているようなこの商品ページの動きなのですが
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を使って異なる画像3枚をスライドさせたいのですが画像サイズをそろえることができません。
画像サイズは1枚目1000×600と二枚目1429×1000と三枚目1500×1000です。
画像の表示サイズをそろえて、縦横比を維持しつつ、はみ出た部分を切り取らずに画像全体を表示させたい。スマホで表示。

### 発生している問題・エラーメッセージ

以前の質問でも解決策としてあがっていたのですが、数々のサイトではheightをvwで設定することとobject-fit:cover;を記述することで解決できると紹介されているのですが、うまくいきません。
.slick-slide img {
 width:100%;
 height:55vw;
 object-fit:cover;
}
とするとスライダーでの表示サイズは縦横揃うんですが、1枚目の画像がトリミングされて切れてしまいます。

object-fit:contain;にしてみると画像は全体表示されますが、三枚の画像サイズがそろわなくなります。




### 該当のソースコード
```HTML
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">

<div class="sliderArea">
  <ul class="slider">
<li><a href="＃" target="_blank"><img src="3.jpg"></a></li>
<li><a href="＃" target="_blank"><img src="1000px.jpg" ></a></li>
<li><a href="h＃" target="_blank"><img src="1.jpg"alt=""></a></li>
</ul>
</div>```ここに言語を入力
コード
```


```CSS
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
 width:100%;
 height:55vw;
 object-fit:contain;
backgroun:red;
}

.slick-slider{
  padding-left:0;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}
  ```


```javascript
<script>
  $(function() {
      $('.slider').slick({
          autoplay: true, 
          autoplaySpeed: 4000, 
          dots: true, 
          easing: 'ease-in-out', 
          pauseOnFocus: false,
          pauseOnHover: false,
          pauseOnDotsHover: false,
          waitForAnimate: false,

      });
  });
  $('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){
    $('.slider').slick('slickPlay');
  });
  </script>```　
```


また、[https://www.peko-step.com/tool/resize.html](https://www.peko-step.com/tool/resize.html)こちらのような画像サイズ変更サイトで1000×600を縦横比率を維持しつつ他の二枚とサイズの近い1500×900に変更してみるなどして設定しましたが、結果は同じでした。

どうぞよろしくお願いします。



追加です。

.slick-slide img {
width:100%;
height:100%;
}
.slick-track{
height:60vh;
}

と

<script>
$(function() {
$('.slider').slick({
autoplay: true, //オートプレイ
autoplaySpeed: 4000, //オートプレイの切り替わり時間
dots: true, //下の点々
easing: 'ease-in-out', //スライドの動きを制御
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
waitForAnimate: false,
variablewidth:true

});
});

も試してみました。
しかし縦がそろわなくなってしまいました。
コード
```

slickで異なるサイズの画像を切り取りや引き延ばすことなく縦横揃えたい

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