carousel is sliding on ios when clicking whitout controls

Created by: MarjolaineLB

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 !