如何在 IE 上使用 swiper？ 有什么解决办法吗？

Question

Swiper slider is okay on chrome but in the internet explorer, it is not working how I fix this anyone has a solution of this? if yes please share it Thanks

Answer 1

I tested the official demo in IE 11 and it can't work. I found that Swiper has dropped IE 11 support since v5. You could check this commit and this thread . Now the latest version is v6.0.4 so it can't work in IE 11.

If you want to use Swiper on IE 11, I think you can use v4.x which is the latest version that supports IE. For more information, you could refer to this thread .

Answer 2

I do some research on Swiper slider and I got that swiper didn't work for Internet Explorer but the only version 2.xx version that works for an older browser, I tried but it didn't work for me. After done a little more research on sliders then I got a Slick slider that works the same as swiper. It also works for Internet Explorer and other browsers. I do some sud of code as I did before in the swiper

$('.slider').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  speed: 500,
  dots: true,
  arrows: false,
  centerMode: false,
  focusOnSelect: false,
  autoplay: true,
  autoplaySpeed: 2000,
  slide: 'div',
  responsive: [
      {
      breakpoint: 900,
      settings: {
          slidesToShow: 4,
          slidesToScroll: 1,
      }
      },
      {
      breakpoint: 425,
      settings: {
          slidesToShow: 3,
          slidesToScroll: 1
      }
      },
      {
      breakpoint: 375,
      settings: {
          slidesToShow: 2,
          slidesToScroll: 1
      }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
  ]
});

with this HTML

<div class="slider">
<div class="item"><img src="images/logo1.png" alt="Logo"></div>
<div class="item"><img src="images/logo2.png" alt="Logo"></div>
<div class="item"><img src="images/logo3.png" alt="Logo"></div>
<div class="item"><img src="images/logo4.png" alt="Logo"></div>
<div class="item"><img src="images/logo5.png" alt="Logo"></div>
</div>

I also linked the cdn files for more information please visit the official slick site here

Answer 3

At the company I work at, we had to support IE11 which is a headache like everyone knows. After hours of googling and trying out different fixes, I finally found one!

I downgraded swiper to v3.4.2 and switched to using the Swiper jQuery file instead of the regular swiper.js file and tada! it worked!

If anyone is facing this issue in 2021, this is the fix for you.

Use the swiper.jquery.min.js file here . The way to use swiper changes a little bit in v3.4.2 from the latest version so you'd need to look at some of the examples to make your code works correctly.