This time I will share jQuery Plugin and tutorial about Mobile-friendly Carousel / Slideshow Plugin With jQuery And Bootstrap, hope it will help you in programming stack.
Bootstrap Touch Slider is a jQuery plugin used to enhance the default Bootstrap carousel component with additional features like touch events support, slide/fade animations and CSS3 animated slide text.
How to use it:
1. Make sure you first have jQuery library and Bootstrap framework installed in the web project.
1 |
<link href="/path/to/bootstrap.min.css" rel="stylesheet"> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/bootstrap.min.js"></script> |
2. Load the jQuery touchSwipe plugin in the document.
1 |
<script src="/path/to/jquery.touchSwipe.min.js"></script> |
3. Load the Animate.css in the head section that will provide the CSS3 animations for your slide text.
1 |
<link href="/path/to/animate.min.css" rel="stylesheet"> |
4. You might also need to load the Font Awesome for the navigation icons.
1 |
<link href="/path/to/font-awesome.min.css" rel="stylesheet"> |
5. You might also need to load the Font Awesome for the navigation icons. If you want to change ‘#bootstrap-touch-slider’ id then you have to change ‘Carousel-indicators’ and ‘Carousel-Control’ ‘#bootstrap-touch-slider’ slide as well.
01 |
<div id="bootstrap-touch-slider" class="carousel bs-slider fade control-round indicators-line" |
04 |
data-interval="false" > |
07 |
<ol class="carousel-indicators"> |
08 |
<li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li> |
09 |
<li data-target="#bootstrap-touch-slider" data-slide-to="1"></li> |
10 |
<li data-target="#bootstrap-touch-slider" data-slide-to="2"></li> |
14 |
<div class="carousel-inner" role="listbox"> |
17 |
<div class="item active"> |
20 |
<img src="1.jpg" alt="Bootstrap Touch Slider" class="slide-image"/> |
21 |
<div class="bs-slider-overlay"></div> |
23 |
<div class="container"> |
26 |
<div class="slide-text slide_style_left"> |
27 |
<h1 data-animation="animated zoomInRight">Slide Text</h1> |
35 |
<div class="item active"> |
38 |
<img src="2.jpg" alt="Bootstrap Touch Slider" class="slide-image"/> |
39 |
<div class="bs-slider-overlay"></div> |
41 |
<div class="container"> |
44 |
<div class="slide-text slide_style_left"> |
45 |
<h1 data-animation="animated zoomInRight">Slide Text</h1> |
53 |
<div class="item active"> |
56 |
<img src="3.jpg" alt="Bootstrap Touch Slider" class="slide-image"/> |
57 |
<div class="bs-slider-overlay"></div> |
59 |
<div class="container"> |
62 |
<div class="slide-text slide_style_left"> |
63 |
<h1 data-animation="animated zoomInRight">Slide Text</h1> |
