slider with animation text

HTML:

<div id="bootstrap-touch-slider" class="carousel bs-slider fade control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="5000" >

            <!-- Indicators -->

            <ol class="carousel-indicators">

                <li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>

                <li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>

                <li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>

            </ol>

            <!-- Wrapper For Slides -->

            <div class="carousel-inner" role="listbox">

                <!-- Third Slide -->

                <div class="item active">

                    <!-- Slide Background -->

                    <img src="images/sliders/slider3.jpg" alt="Bootstrap Touch Slider"  class="slide-image"/>

                    <div class="bs-slider-overlay"></div>

                    <div class="container">

                        <div class="row">

                            <!-- Slide Text Layer -->

                            <div class="slide-text slide_style_center">

                                <h1 data-animation="animated zoomInRight">❝ Helping Organizations save</h1>

                                <p data-animation="animated fadeInLeft">time and money with software-backed simplification of process. ❞</p>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- End of Slide -->

                <!-- Second Slide -->

                <div class="item">

                    <!-- Slide Background -->

                    <img src="images/sliders/slider4.jpg" alt="Bootstrap Touch Slider"  class="slide-image"/>

                    <div class="bs-slider-overlay"></div>

                    <!-- Slide Text Layer -->

                    <div class="slide-text slide_style_right">

                        <h1 data-animation="animated flipInX">❝ Understanding your</h1>

                        <p data-animation="animated lightSpeedIn"> challanges &amp; building customized software backed by our expertise. ❞</p>

                    </div>

                </div>

                <!-- End of Slide -->

                <!-- Third Slide -->

                <div class="item">

                    <!-- Slide Background -->

                    <img src="images/sliders/slider5.jpg" alt="Bootstrap Touch Slider"  class="slide-image"/>

                    <div class="bs-slider-overlay"></div>

                    <!-- Slide Text Layer -->

                    <div class="slide-text slide_style_left ">

                        <h1 data-animation="animated zoomInLeft">❝Anticipate costs, plan</h1>

                        <p data-animation="animated fadeInRight">upgrades &amp; maintainIT setup health with Globus IT. ❞</p>

                    </div>

                </div>

                <!-- End of Slide -->

            </div><!-- End of Wrapper For Slides -->

            <!-- Left Control -->

            <a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">

                <span class="fa fa-angle-left" aria-hidden="true"></span>

                <span class="sr-only">Previous</span>

            </a>

            <!-- Right Control -->

            <a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">

                <span class="fa fa-angle-right" aria-hidden="true"></span>

                <span class="sr-only">Next</span>

            </a>

        </div> <!-- End  bootstrap-touch-slider Slider -->

JS & css:

add bootstrap-touch-slider.css & bootstrap-touch-slider-min.js to add the animation.

        <script type="text/javascript">

            $('#bootstrap-touch-slider').bsTouchSlider();

        </script>

<script>

$(document).ready(function () {

 $('.carousel').carousel({

  interval: 1000 * 10

});

    // Handler for .ready() called.

    $('html, body').animate({

        scrollTop: $('#bootstrap-touch-slider').offset().top

    }, 'slow');

});

</script>