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

Question

I am trying to implement swipe functionality for mobile view of our website. I am using idangero swiper for that. But problem is when there is extra div with other class in between any div containing class -'swiper-container', 'swiper-wrapper' and 'swiper-slide' it does not work. Such as below code

<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>

We are using AEM for authoring of web components and AEM authoring components adds extra divs. So can not remove those.

Any help to make it work with extra div is appreciated.

Just from AEM perspective... is your AEM component adding the extra <div class="another-div">? — Imran Saeed
That parsys class div should contain the whole component not the slide. Bad component design imho. Can you change the component code? — Imran Saeed
It is containing whole component . My components are plans which author can use multiple types. That is why they need to have 'swiper-slide' class , not 'swiper-wrapper ' or 'swiper-container' — Neerav Patel

Neerav Patel Neerav Patel · Accepted Answer · 2017-03-31T18:02:29

I had success from 2 different ways.

1) changed library from swiper.js to carousel-swipe.js which is small jQuery plugin which uses bootstrap carousel and make it work with mobile swipe.

2)removed extra divs form AEM component. Below code will remove extra div created by component, which in this case is class="parsys"

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

Component itself will also create div and you can remove that with help of cq:htmlTag .

Below is link where you can find details for second approach AEM-remove component wrapper div

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

1 Answers