The jQuery-slider Plugin provides a simple, adaptable slideshow that is responsive.
Downloading or Forking this repository
####Include the CSS & JS style.css can be modified to fit a website design
<link href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/2.1.4/jquery.min.js"></script>
<script src="js/easySlider.js"></script>
####Menu Markup
<div id="slider">
<ul class="slides">
<li><img class="responsive" src="http://placehold.it/350x150"></li>
<li><img class="responsive" src="http://placehold.it/350x150"></li>
<li><img class="responsive" src="http://placehold.it/350x150"></li>
</ul>
<ul class="controls">
<li><img src="img/prev.png" alt="previous"></li>
<li><img src="img/next.png" alt="next"></li>
</ul>
<ul class="pagination">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
####Initialize
<script>
$(function() {
$("#slider").easySlider({});
});
</script>
There are some customizable options in this plugin using key : value pairs. These are the defaults. Visit jQuery-slider Plugin for description of these properties.
$(".nav-menu").mobilemenu({
slideSpeed: 500,
autoSlide: true,
paginationSpacing: "15px",
paginationDiameter: "12px",
paginationPositionFromBottom: "0px",
controlsClass: ".controls",
slidesClass: ".slides",
paginationClass: ".pagination"
});
Visit jQuery-slider Plugin.