Question

我正在尝试为我们网站的移动视图实现滑动功能。我正在使用idangero swiper。但问题是当在包含class -'swiper-container'，'swiper-wrapper'和'swiper-slide'的任何div之间有其他类的额外div时它不起作用。如下面的代码

<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创作组件添加了额外的div。所以不能删除那些。

任何有助于使用额外div的帮助都表示赞赏。

Answer 1

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

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

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

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

组件本身也会创建div，你可以在cq：htmlTag的帮助下删除它。

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

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

1 个答案: