Responsive jQuery content slider, Check the below features
- Fully responsive
- Horizontal, vertical, and fade modes
- Slides can contain images, video, or HTML content
- Small file size, fully themed, simple to implement
- Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
Please use the following methods to use the plugin. First thing you have to do is download the whole files. and place the css code in css files. Call the jquery files from google or from any other good cdn
Step 1 : Include Libraries
<!– jQuery library (served from Google) –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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" />Or, if you like, you can get the bxSlider’s resources from the CDN: check below
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />Step 2: HTML markup
Insert the markup in the slider div
<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: Calling the bxSlider
$(document).ready(function(){
$(‘.bxslider’).bxSlider();
});
