<div class="container" id="features">
	<div class="row">
		<div class="col-sm-12 col-md-8">
			<h2>Why should I use this slider?</h2>
			<ul>
				<li>Fully responsive - will adapt to any device</li>
				<li>Horizontal, vertical, and fade modes</li>
				<li>Slides can contain images, video, or HTML content</li>
				<li>Advanced touch / swipe support built-in</li>
				<li>Uses CSS transitions for slide animation (native hardware acceleration!)</li>
				<li>Full callback API and public methods</li>
				<li>Small file size, fully themed, simple to implement</li>
				<li>Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+</li>
				<li>Tons of configuration options</li>
			</ul>


			<h2>How to install</h2>
			<div class="step">
			    <h3>Step 1: Link required files</h3>
			    <p>First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.</p>
{{#markdown }}
```
<!-- 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" />
```
{{/markdown }} 
			</div>
			<div class="step">
			    <h3>Step 2: Create HTML markup</h3>
			    <p>Create a <code>&lt;ul class="bxslider"&gt;</code> element, with a <code>&lt;li&gt;</code> for each slide. Slides can contain images, video, or any other HTML content!</p>
{{#markdown }}
```
<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>
```
{{/markdown }} 
			</div>
			<div class="step">
			    <h3>Step 3: Call the bxSlider</h3>
			    <p>Call .bxslider() on <code>&lt;ul class="bxslider"&gt;</code>. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!</p>
{{#markdown }}
```
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
```
{{/markdown }} 
			</div>	

			<p>Check the examples and docs for more information on installation and customization</p>
		</div>
	</div>
</div>
