常連

### 前提・実現したいこと

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で異なるサイズの画像を切り取りや引き延ばすことなく縦横揃えたい

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

### 実現したいこと
【slick sliderを使用したスライダー画像の重なり順の指定について】

画像A、画像Bを重ねて1つのスライダーアイテムを構成するとき、画像A、画像Ｂの間にスライドしない要素を挟み込みたいです。

このような場合、HTMLをどのように構成すべきでしょうか。

### 前提
- jQueryのSlick Slider使用
- wordpress使用

### 該当のソースコード
当然ですが、親要素が違う＆slick sliderの仕様により、mv-sliderからmv-slider__itemの間に複数のpotision:relativeが指定された要素が挟み込まれてしまいます。
そのため、斜め線の下に画像A,Bが配置されてしまいます。

```ここに言語名を入力
//mvにposition:relative;
<section class="mv">
    <div class="mv-slider">
        <div classs="mv-slider__item">
            //画像A
            <img class="mv-slider__item--main" src="img/slider-img01.png">
　　　　//画像B
            <img class="mv-slider__item--sub" src="img/slider-img01-sub.png">
        </div>
    </div>
    
    //[スライドしない要素]セクション感を仕切る斜め線
    <div class="skew-line"></div>
</section>

<style>
.mv {
    position: relative;
    z-index: 0;
}

.skew-line {
    position: absolute;
    content: '';
    width: 100%;
    height: 80px;
    left: 0;
    bottom: -80px;
    background-image: linear-gradient( 90deg, #8AD2F9 0%, #1994D8 100%);
    transform: skewY(-3.7deg);
    transform-origin: bottom left;
    z-index: 30;
}

.mv-slider {
  position: relative;
  z-index: 10;
}

.mv-slider__item--main {
    position: relative;
}

.mv-slider__item--slider {
    position: absolute;
    width: 46%;
    top: 70%;
    left: 52%;
    z-index: 40;
}
</style>
```
### 試したこと
- 画像Aと画像Bをそれぞれ別のスライダーにして、スライダーに重ねる
　→slick sliderで補完される要素への高さ指定がうまくいきませんでした。

### イメージ画像
[イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-07-01/bf9d27ec-481c-4d30-8fd7-abc1df710e0a.png)

異なる親要素を持つ要素の重なりの指定方法が知りたい

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

###発生している問題
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が止まらない

![イメージ説明](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ボタンを外側へ出したい

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