Showcase Slider is a simple jQuery Slider, horizontally or vertically two components slide.
Features
- autoplay (with a progressbar)
- random play
- pause on hover
- horizontal slides
- vertical slides
- custom info for image like ‘sale’, ‘-50%’ or something else
- keyboard support for next and prev slide
How to use
Link required Files
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Javascript file -->
<script src="src/js/sliderShowcase.js"></script>
<!-- CSS file -->
<link href="src/css/slidershowcase.css" rel="stylesheet" />
HTML Markup
<section id="demo-slider">
<div>
<h2>Product1</h2>
<p>Lorem ipsum dolor sit amet, coetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, takimata sanctus est Lorem ipsum dolor sit amet.</p>
<a href="#">read more</a>
<img src="YOUR_IMAGE" alt="" />
</div>
<div>
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, coetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum Lorem ipsum dolor sit amet.</p>
<a href="#">read more</a>
<img src="YOUR_IMAGE" alt="" />
</div>
</section>
Call the Plugin
$(document).ready(function()
$('#demo-slider').SliderShowcase(
OPTIONS
);
);
You can find the options here or in the downloaded documentation file.
Included Files
- Documentation
- HTML Example
- jQuery: sliderShowcase
- jQuery: Pause Jquery plugin v0.1
- jQuery: imagesLoaded PACKAGED v4.1.1
Some Files are only included in Preview / Documentation
if your slider looks weird, could be due to the missing scrips, which are only in preview
- Bootstrap
- Font Awesome
- Dreamweaver.js (for syntax highlight)
- custom css for Preview
- jQuery easing
- Slider Images
