個人的にトップスライダーでよくあるのが、画像がズームアップしながらフェードで画像が切り替わるという仕様。そのフェード×ズームアップの仕様が、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にて )
つまり余計なコードが書かれている可能性あり。
ということでご参考程度にどうぞ・・・