0

如何使 Bootstrap 轮播滑块使用鼠标左右滑动

我在这里使用了这个 html 代码：

您可以在此处查看实时站点https://dev.whmdesign.com/index.php/component/sppagebuilder/1-carousel

<div id="sppb-carousel1" data-interval="5000" class="sppb-carousel sppb-testimonial-pro sppb-slide sppb-text-center " data-sppb-ride="sppb-carousel">
<ol class="sppb-carousel-indicators">
    <li data-sppb-target="#sppb-carousel1" class="" data-sppb-slide-to="0"></li>
    <li data-sppb-target="#sppb-carousel1" data-sppb-slide-to="1" class="active"></li>
    <li data-sppb-target="#sppb-carousel1" data-sppb-slide-to="2"></li>
    <li data-sppb-target="#sppb-carousel1" data-sppb-slide-to="3"></li>
</ol>
<div class="sppb-carousel-inner">
    <div class="sppb-item">
        <div class="sppb-testimonial-message">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
        <div class="sppb-addon-testimonial-pro-footer">
            <img src="/images/2019/02/13/1.jpg" class="sppb-avatar-circle" alt="John Doe">
            <div class="testimonial-pro-client-name-wrap"><span class="sppb-addon-testimonial-pro-client-name">John Doe</span>
            </div>
        </div>
    </div>
    <div class="sppb-item active">
        <div class="sppb-testimonial-message">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
        <div class="sppb-addon-testimonial-pro-footer">
            <img src="/images/2019/02/13/1.jpg" class="sppb-avatar-circle" alt="John Doe">
            <div class="testimonial-pro-client-name-wrap"><span class="sppb-addon-testimonial-pro-client-name">John Doe</span>
            </div>
        </div>
    </div>
    <div class="sppb-item">
        <div class="sppb-testimonial-message">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
        <div class="sppb-addon-testimonial-pro-footer">
            <img src="/images/2019/02/13/1.jpg" class="sppb-avatar-circle" alt="John Doe">
            <div class="testimonial-pro-client-name-wrap"><span class="sppb-addon-testimonial-pro-client-name">John Doe</span>
            </div>
        </div>
    </div>
    <div class="sppb-item ">
        <div class="sppb-testimonial-message">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
        <div class="sppb-addon-testimonial-pro-footer">
            <img src="/images/2019/02/13/1.jpg" class="sppb-avatar-circle" alt="John Doe">
            <div class="testimonial-pro-client-name-wrap"><span class="sppb-addon-testimonial-pro-client-name">John Doe</span>
            </div>
        </div>
    </div>
</div><a href="#sppb-carousel1" class="left sppb-carousel-control" data-slide="prev"><i aria-hidden="true" aria-label="Previous" class="fa fa-angle-double-left"></i></a><a href="#sppb-carousel1" class="right sppb-carousel-control" data-slide="next"><i aria-hidden="true" aria-label="Next" class="fa fa-angle-double-right"></i></a>

4

1 回答 1

1

事实上，Bootstrap 在这个功能上存在问题。

您可以阅读以下内容：https ://github.com/twbs/bootstrap/issues/17750

所以我推荐你Slick Slider，一个特定的轮播插件：完全响应。随其容器缩放。每个断点的单独设置。可用时使用 CSS3。没有时功能齐全。启用滑动。或禁用，如果您愿意。桌面鼠标拖动。无限循环。使用箭头键导航完全可访问。添加、删除、过滤和取消过滤幻灯片。自动播放、点、箭头、回调等...

是的，这个版本使用的是 jquery ...... 如果你想更快地构建你的应用程序，性能更高，并在 ES6/7 上使用最佳实践，请查看：https ://react-slick.neostack.com/ 但它与 React .

$().ready(function(){
  $('.slick-carousel').slick({
    arrows: true,
    centerPadding: "0px",
    dots: true,
    infinite: true,
    slidesToShow: 3,
    centerMode: true
  });
});
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<div class="slick-carousel">
  <div>Hello World!</div>
  <div>Hello World!</div>
  <div>Hello World!</div>
  <div>Hello World!</div>
  <div>Hello World!</div>
  <div>Hello World!</div>
</div>
			
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>

于 2019-02-13T03:59:20.100 回答