时间戳

首页 > 解决方案 > 如何在 elementor post 小部件中添加 swiper 幻灯片

javascript - 如何在 elementor post 小部件中添加 swiper 幻灯片

问题描述

我正在尝试通过一些自定义 CSS 和 js 使用 swiperjs 制作一个 elementor post 滑块。我尝试制作滑块很多次，但它不能正常工作。有时它在 elementor 预览上工作，但在前端不能正常工作。我已经使用 html 小部件来实现我的代码。下面的代码是我正在使用的。

<script>


  jQuery(".post-slide>.elementor-widget-container").addClass("swiper-container");
  jQuery(".post-slide>.swiper-container>.elementor-posts-container").addClass("swiper-wrapper");
    jQuery(".post-slide>.swiper-container>.elementor-posts-container>.elementor-post").addClass("swiper-slide");
  jQuery('.post-slide>.swiper-container').append('<div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'); 
  
      var swiper= new Swiper('.swiper-container', {
      spaceBetween: 10,
      centeredSlides: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
 navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
    });
</script>

标签： javascriptcsssliderelementorswiperjs

解决方案

推荐阅读