当 swiper-contaIner、wrapper 和 slide 之间有额外的 div 时，Swiper 不工作

Question

我正在尝试为我们网站的移动视图实现滑动功能。为此，我正在使用 idangero swiper。但问题是，当包含 class -'swiper-container'、'swiper-wrapper' 和 [=20= 的任何 div 之间存在额外的 div 和其他 class 时] 这是行不通的。比如下面的代码

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="another-div">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
        </div>
    </div>

我们正在使用 AEM 创作 Web 组件，并且 AEM 创作组件添加了额外的 divs。所以不能删除那些。

感谢任何帮助它与额外 div 一起工作的人。

Answer 1

我通过两种不同的方式取得了成功。

1) 将库从 swiper.js 更改为 carousel-swipe.js 这是一个小型 jQuery 插件，它使用 bootstrap 轮播并使其与移动滑动一起使用。

2) 从 AEM 组件中删除了额外的 divs。下面的代码将删除组件创建的额外 div，在本例中为 class="parsys"

<%@ page import="com.day.cq.wcm.api.components.IncludeOptions" %>
<%
   IncludeOptions opts = IncludeOptions.getOptions(request, true);
   opts.setDecorationTagName("");
 %>

组件本身也会创建 div，您可以在 cq:htmlTag 的帮助下将其删除。

下面是 link 您可以在其中找到第二种方法的详细信息 AEM-remove component wrapper div

当 swiper-contaIner、wrapper 和 slide 之间有额外的 div 时，Swiper 不工作

Swiper not working when there is extra div between swiper-contaIner, wrapper and slide

html

jquery

aem

swiper