carousel is sliding on ios when clicking whitout controls

Hi there,

I’ve an issue I can’t understand using the bootstrap carousel. On mobile, I want to slide by swiping (and not clicking), and, on click, a pinterest button appears. I’ve desactivated the carousel control buttons on mobile device (see css code below) and have a jquery rule to the pinterest button, It works perfectly on android. But on ios, on click, the carousel is sliding.

Any idea ?

My code

<div id="carouselwork" class="carousel slide work-single" data-ride="carousel" data-interval="false">
                    <div class="carousel-inner">
                        <div class="carousel-item  active">
                             <img src="..." alt="..." />
                             <div class="social-sharing ss-social-sharing" >
				   <a onclick="return ss_plugin_loadpopup_js(this);" rel="external nofollow" class="ss-button-pinterest" href="..." target="_blank"></a>
                             </div>
                             <div class="img-work-caract">
                                 <p>the title</p>
                                 <div class="counter">1/<span class="total">2</span>
                                 </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="..." alt="..." />
                             <div class="social-sharing ss-social-sharing" >
				  <a onclick="return ss_plugin_loadpopup_js(this);" rel="external nofollow" class="ss-button-pinterest" href="..." target="_blank"></a>
                             </div>
                             <div class="img-work-caract">
                                 <p>the title</p>
                                 <div class="counter">2/<span class="total">2</span>
                                 </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev carousel-control" href="#carouselwork" role="button" data-slide="prev"></a>
                    <a class="carousel-control-next carousel-control" href="#carouselwork" role="button" data-slide="next"></a>
                </div>

and css

@media (max-width: 768px) {
        .social-sharing.visible {
            display: block;
        }
        .carousel-control {
            display: none;
        }
    }

and jquery :

$('.carousel-item img').click(function() {
     $('.social-sharing').toggleClass('visible'); });
$("#carouselwork").on('slide.bs.carousel', function () {
       $('.social-sharing').removeClass('visible');
 });

Thanks !

[patrickhlauke]

what @happy-dev means is that on iOS, when you just tap on the carousel, it also slides, which i can confirm. i’d hazard a guess that it’s because a clean tap still generates one sacrificial touchmove event, which our curstom sliding script may be picking up. on android, it likely follows the pointer events path (from memory, we implemented that, right? not checked in a while) where this doesn’t happen.

[Johann-S]

I made a PR which fix that: https://github.com/twbs/bootstrap/pull/28558 And you can test it here: https://deploy-preview-28558--twbs-bootstrap.netlify.com/docs/4.3/components/carousel/#with-indicators