时间戳

首页 > 解决方案 > 单击 whitout 控件时，引导轮播在 ios 上滑动

jquery - 单击 whitout 控件时，引导轮播在 ios 上滑动

问题描述

我有一个使用引导轮播无法理解的问题。在移动设备上，我想通过滑动（而不是点击）来滑动，点击时会出现一个 pinterest 按钮。我已经停用了移动设备上的轮播控制按钮（请参阅下面的 css 代码），并且对 pinterest 按钮有一个 jquery 规则，它在 android 上完美运行。但是在ios上，点击时，轮播正在滑动。

任何想法 ？

我的代码

$('.carousel-item img').click(function() {
  $('.social-sharing').toggleClass('visible');
});
$("#carouselwork").on('slide.bs.carousel', function() {
  $('.social-sharing').removeClass('visible');
});
@media (max-width: 768px) {
  .social-sharing.visible {
    display: block;
  }
  .carousel-control {
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

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

谢谢 ！

标签： jquerytwitter-bootstrap

解决方案

似乎这是轮播引导程序中的错误。已在 github 上的分支 v4-jo-fix-carousel-click-slide 上部署了一个修复程序

推荐阅读