swiperでスライダー。ieでもズームアップ時ちかちかしない。

個人的にトップスライダーでよくあるのが、画像がズームアップしながらフェードで画像が切り替わるという仕様。そのフェード×ズームアップの仕様が、ieだと画像がはみ出してちかちかするんですよね。

どうにかならんかなーと思って調べたところ、こちらのページを参考に解決いたしました!ありがとうございます。slickの場合で書かれていますが、swiperでも同じく対処できました。
ということで以下メモです。

swiperは5系から(?)ieを完全に切り捨てたということだったので4系を使っていたのですが、とある事情で5系に変えました。一応私が使った限りでは、「ieで動かない!!」ということは特になさそうでした。

完成形とコード

完成形はこんな感じ。cdn等でswiperのjs・cssは読み込んでおいてください〜。

swiper-container > swiper-wrapper > swiper-slide > slide-img
という入れ子は同じですが、.slide-imgをspanにあてています。そのspanにbackground-imageも指定(普通のimg要素でも大丈夫みたいです)。

一番外側のdivは見た目を調整するためにつけたので、なくても問題ありません。

   
<div id="mv" class="bl_mv ly_mv">         
    <div id="mv-slider" class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
        <span class="slide-img" style="background-image: url(img/image_Main_01.png);"></span></div>
            <div class="swiper-slide">
         <span class="slide-img" style="background-image: url(https://placehold.jp/797ff2/ffffff/2500x2000.jpg);"></span></div>
            <div class="swiper-slide">
         <span class="slide-img" style="background-image: url(https://placehold.jp/ceff3b/ffffff/2500x2000.jpg);"></span></div>
          </div>
        </div><!-- .swiper-container -->
   </div>
CSS
@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1) rotate(0.001deg);
            transform: scale(1) rotate(0.001deg);
  }
  100% {
    -webkit-transform: scale(1.05) rotate(0.001deg);
            transform: scale(1.05) rotate(0.001deg);
  }
}

@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1) rotate(0.001deg);
            transform: scale(1) rotate(0.001deg);
  }
  100% {
    -webkit-transform: scale(1.05) rotate(0.001deg);
            transform: scale(1.05) rotate(0.001deg);
  }
}

.bl_mv {
width: 400px;
height: 300px;
margin: auto;
}

.bl_mv .slide-img {
  height: 300px;
  width: 100%;
  display: block;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.bl_mv .swiper-slide {
  overflow: hidden;
  height: 100%;
  width: 100%;
  opacity: 1;
}

.bl_mv .swiper-slide-active .slide-img,
.bl_mv .swiper-slide-duplicate-active .slide-img,
.bl_mv .swiper-slide-prev .slide-img {
  -webkit-animation: zoomUp 10s linear 0s 1 normal both;
          animation: zoomUp 10s linear 0s 1 normal both;
}

  let mvSlider = new Swiper('#mv-slider', {
    effect: 'fade',
    allowTouchMove: false,
    fadeEffect: {
      crossFade: true,
    },
    autoplay: {
      delay: 8000,
      disableOnInteraction: false,
    },
   // pagination: {
   //   clickable: true,
   //   el: '.swiper-pagination',
   // },
  });

spanタグは高さもpxで指定しないとつぶれてしまうので指定。必要であればisで高さを入れる。
.swiper-slideにつけたoverflow:hidden;ではみ出しを隠しているけど、なぜかこのデモを作ったときはoverflow:hidden;入れてなくても隠れてた( safari chromeにて )

つまり余計なコードが書かれている可能性あり。
ということでご参考程度にどうぞ・・・

タイトルとURLをコピーしました