how we user bxslider in our web template
Hello Guys,
You have some doubt in your mind regarding responsive slider which adapt itself with varying responsive sizes.
1. Fully responsive - will adapt to any device
2. Horizontal, vertical, and fade modes
3. Slides can contain images, video, or HTML content
4. Advanced touch / swipe support built-in
5. Uses CSS transitions for slide animation (native hardware acceleration!)
6. Full callback API and public methods
7. Small file size, fully themed, simple to implement
8. Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
9.Tons of configuration options
Step1: Required files.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
Step 2: Create HTML markup in your html file.
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
Step 3: Call bx-slider java script.
Copy this code in your head section.
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
You have some doubt in your mind regarding responsive slider which adapt itself with varying responsive sizes.
Why should I use this slider?
Fully responsive slider - will adapt to any device; Horizontal, vertical, and fade modes; Slides can contain images, video, or HTML content ...
1. Fully responsive - will adapt to any device
2. Horizontal, vertical, and fade modes
3. Slides can contain images, video, or HTML content
4. Advanced touch / swipe support built-in
5. Uses CSS transitions for slide animation (native hardware acceleration!)
6. Full callback API and public methods
7. Small file size, fully themed, simple to implement
8. Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
9.Tons of configuration options
How we install bx-slider?
Download bxslider: http://bxslider.com/Step1: Required files.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
Step 2: Create HTML markup in your html file.
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
Step 3: Call bx-slider java script.
Copy this code in your head section.
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
Comments
Post a Comment