Question

如何使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>

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

如何使Bootstrap旋转木马滑块使用左右鼠标滑动

1 个答案: