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 & 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 & 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>
No comments:
Post a Comment