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.

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

Popular Posts