Showcase Slider is a straightforward jQuery Slider, horizontally or vertically two parts slide.
Options
- autoplay (with a progressbar)
- random play
- pause on hover
- horizontal slides
- vertical slides
- customized data for picture like ‘sale’, ‘-50%’ or one thing else
- keyboard help for subsequent and prev slide
How you can use
Hyperlink required Recordsdata
<!-- 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 -->
<hyperlink href="src/css/slidershowcase.css" rel="stylesheet" />HTML Markup
<part 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="#">learn extra</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="#">learn extra</a>
<img src="YOUR_IMAGE" alt="" />
</div>
</part>
Name the Plugin
$(doc).prepared(operate(){
$('#demo-slider').SliderShowcase(
{
OPTIONS
});
});Yow will discover the choices here or within the downloaded documentation file.
Included Recordsdata
- Documentation
- HTML Instance
- jQuery: sliderShowcase
- jQuery: Pause Jquery plugin v0.1
- jQuery: imagesLoaded PACKAGED v4.1.1
Some Recordsdata are solely included in Preview / Documentation
in case your slider appears to be like bizarre, could possibly be because of the lacking scrips, that are solely in preview
- Bootstrap
- Font Superior
- Dreamweaver.js (for syntax spotlight)
- customized css for Preview
- jQuery easing
- Slider Photos
