IE11対応・IE11で上下の位置ずれを治す。Swiper.js5系 prev/nextボタン

IE11では、Swiper6系以降は動作しない。
IE11対応するにはSwiper5系を利用する。

Swiper5系でも、PREV/NEXTの左右の矢印ボタンが表示されないので、現象があるためCSSのカスタムが必要。

IE11で
・swiperの左右ボタンが表示されない
・swiperの左右ボタンが上下の中央より少し下にずれてしまう
場合は以下のCSSを適用する

.swiper-button-next {
background-image: url(static_images/swiper_arrow.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 44px;
height: 44px;
right: 0;
position: absolute;
z-index: 10;
transform: translate(0%, -50%);
margin-top: 0;
}

.swiper-button-next:after {
content: '';
}

.swiper-button-prev {
background-repeat: no-repeat;
background-image: url(static_images/swiper_arrow.svg);
background-size: 100%;
width: 44px;
height: 44px;
left: 0;
position: absolute;
z-index: 10;
transform: translate(0%, -50%) scale(-1, 1);
margin-top: 0;
}

.swiper-button-prev:after {
content: '';
}