Granular / Bubbling check for noSwiping slides

[strack]

Hello there,

I'm using your noSwiping class feature and ran across a slight issue in onTouchStart (line 1097):

if (params.noSwiping && event.target && event.target.className && event.target.className.indexOf(params.noSwipingClass) > -1) return false;

The issue here is that the event.target.className.indexOf.. check is only performed on the top-most element.

Meaning, if I have a label (div) inside my swiper slide, the check is performed only on the label, not on the containing swiper slide.

I added a function just below your events section that checks for noSwipingClass in the existing element, and all parent elements up through the wrapperClass. If it doesn't find it by then, it will return false, meaning that it is ok to swipe. If it does find it, it will return true, meaning that it is not okay to keep swiping.

I also modified the check inside of onTouchStart (line 1097) to use the new function.

---

I'm hoping that this will give your library some increased functionality/control, by allowing you to be very granular (or very lazy) with seting noSwiping. Some examples:

• Disallow swiping on all slides by adding the noSwipingClass to the wrapper:

<div class="swiper-wrapper swiper-no-swiping">
    ...
</div>

• Disallow swiping on some slides but not others, regardless of # of child elements:

<div class="swiper-wrapper">
    <div class="swiper-slide swiper-no-swiping">
        <div> 
            ...lots more elements, no swiping allowed!...
        </div>
    </div>
    <div class="swiper-slide">
        <div> 
            ...lots more elements, swiping OK!...
        </div>
    </div>
    <div class="swiper-slide swiper-no-swiping">
        ...only text, but no swiping allowed!...
    </div>
</div>

• Make hotspots on a slide by turning swiping off on other child elements:

<div class="swiper-wrapper">
    <div class="left-side" style="width:15%;">swiping is allowed here</div>
    <div class="main-content swiper-no-swiping" style="width:70%;">main area, swiping disabled</div>
    <div class="right-side" style="width:15%;">swiping is allowed here too</div>
</div>

In the above example, swiping is only allowed on the first and last 15% of the page. The middle section won't allow swiping.

---

I'm sure there's probably a more effective way to do this, but I'll leave that up to you.
It will make for some good functionality, though, and at the very least 'fix' an existing issue with child elements in a swiper slide.

Hope this helps. Great library!

Strack

[nolimits4web]

Great, thanks

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.