slick を使って少しずつズームをかけながら画像を切り替えたい

Question

今現状では、ズームなどしなくて単に画像が切り替わっている状態です。
お分かり頂ける方、ご教示の方よろしくお願いします。

 <div class="fv">
    <ul class="slider">
      <li><img src="img/........." alt=""></li>
      <li><img src="img/........." alt=""></li>
      <li><img src="img/........." alt=""></li>    
    </ul>
    <div class="fv-text">
      <p class="fv-text1">xxxxxxxxx</p>
      <p class="fv-text2">xxxxxxxxx</p>
    </div>
  </div>

.fv{
  background-position: center;
  background-size: cover;
  max-height: 1079px;
  position: relative;
  margin-bottom: 37px;
}
.fv-img{
  object-fit: cover;
}
.fv-text{
  position: absolute;
  top: 270px;
  right: 373px;
  writing-mode: vertical-rl;
  font-size: 3.4rem;
  font-weight: bold;
  color: #FFFFFF;
  letter-spacing: 0.2em;
}
.fv-text1{
  margin-left: 51px;
}
.slick-arrow{
  display: none !important;
}

$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 2000,
  speed: 1000,
  fade: true,
  cssEase: 'linear',

});

Answer 1

slickではなく、swiperを使ったたら出来ました。

Answer 2

「slick を使って少しずつズームをかけながら画像を切り替えたい」でググったところ、次のような結果でした。

slick を使って少しずつズームをかけながら画像を切り替えたい - Google 検索

いくつか参考になりそうな記事がありましたので、お試しになられてはどうでしょうか。

---

Slickを利用して画像が徐々にズームしていくエフェクトをかける | 日常の生活と仕事を雑記するコーダーのブログ | CattleMute
Swiper+CSSのみ！ズームアップしながらフェードインで切り替わるスライダーの実装方法 | WEMO
【jQuery】transform:scale()を使用してスライダー（slick）をズームアウトしながら切り替える方法 | カタチップ

Comments

[gaki-log]

そちらの記事は全て見たのですが、出来なかったので皆様に質問をしている状態です。

[Lhankor_Mhy]

回答で提示した全ての記事で transform: scale() を使用していますが、gaki-log さんのコードには含まれていないようでした。
それが原因の一つではないかな、と思います。

[gaki-log]

ご指摘ありがとうございます。
何回か transform: scale()を使ってやってみたのですが、うまくいきません。
どこにどのように使うのか、わかるのであればコード付きでご教示にほどよろしくお願いします。
お手数おかけしてしまい申し訳なです。よろしくお願いします。

[Lhankor_Mhy]

回答で提示した記事を見ると、
.slider .slick-active img {
transform: scale(1.0);
}
のように使うといいのではないですか？

[gaki-log]

cssにそれを足すだけでは出来ないんですけど、jqureyに何か追記しないといけないですかね？

[Lhankor_Mhy]

具体的なコードがないので具体的な回答は致しかねますが、transition の設定が上手くいっていないとかではないでしょうか。

[gaki-log]

transitionはどこにつけるのでしょうか。

[Lhankor_Mhy]

回答で提示したリンク先を見る感じだと、.slider img ですね。

といいますか、私をからかってますか？