Tiny Responsive jQuery Fade Slider Plugin - Bliss Slider

Bliss Slider is a small jQuery plugin that provides a simple way to create a fully responsive slideshow/slider with navigation and content fade in/out effects.

How to use it:

1. Include the latest version of jQuery library from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include the jQuery bliss slider plugin's javascript and CSS after jQuery library.

<link rel="stylesheet" href="css/bliss-slider.css">
<script type="text/javascript" src="js/bliss-slider.js"></script>

3. Markup Html structure.

<div id="slider" class="slider-container">
<ul class="slider">
<li class="slide">
<div class="slide-bg"> <img src="img/image1.jpg" alt="An Image" draggable="false"> </div>
<div class="slide-content">
<h2>Header 1</h2>
<p>An example paragraph 1</p>
<a href="#">Call to action 1</a> </div>
</li>
<li class="slide">
<div class="slide-bg"> <img src="img/image2.jpg" alt="An Image" draggable="false"> </div>
<div class="slide-content">
<h2>Header 2</h2>
<p>An example paragraph 2</p>
<a href="#">Call to action 2</a> </div>
</li>
<li class="slide">
<div class="slide-bg"> <img src="img/image3.jpg" alt="An Image" draggable="false"> </div>
<div class="slide-content">
<h2>Header 3</h2>
<p>An example paragraph 3</p>
<a href="#">Call to action 3</a> </div>
</li>
</ul>
<div class="slider-controls">
<div class="slide-nav"> <a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a> </div>
<ul class="slide-list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>

4. Call the function to initialize the fade slider with default settings.

<script type="text/javascript">
$(function() {
$("#slider").blissSlider({
auto: 1,
transitionTime: 500,
timeBetweenSlides: 4000
});
});
</script>

---

This awesome jQuery plugin is developed by thisisbliss. For more Advanced Usages, please check the demo page or visit the official website.