How to make Bootstrap carousel slider use left and right mouse swipe

Question

How can make Bootstrap carousel slider use left and right mouse swipe

i used this html cod here :

and you can see the live site here 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

The true thing is that actually Bootstrap have an issue on this functionality.

You could read this in: https://github.com/twbs/bootstrap/issues/17750

So I recommend you Slick Slider , an specific carousel plugin: Fully responsive. Scales with its container. Separate settings per breakpoint. Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging. Infinite looping. Fully accessible with arrow key navigation. Add, remove, filter & unfilter slides. Autoplay, dots, arrows, callbacks, etc...

Yeah this version it's using jquery... If you want to build your app more faster, performant and with best practices on ES6/7 take a look on this: https://react-slick.neostack.com/ But its with 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>