Features

Keyboard Support

Keyboard navigation support enables the user to navigate between the items by using the arrow or custom keys.

Autoplay

Automatically play through the slides.

Random play

Show random slides. Need autoplay.

Pause on Hover

Slides will pause/resume on mouseover. Need autoplay.

Progressbar

Display a progressbar on top while autoplay.

Vertical animation

Support for vertical slide.

Horizontal animation

Support for horizontal slide.

Short info

Support a custom message for image.

How to Install

Step 1: Link required files

The jQuery library needs to be included. Include vs-slider.js and vs-slider.css


					<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
						
					<script src="src/js/sliderShowcase.js"></script>
						
						<link href="src/css/slidershowcase.css" rel="stylesheet" />

Step 2: HTML Markup

You need a container with a unique ID. Inside this container, you have to create a div for each slide. Also you'll need an img tag.


					  

					    
House 1

					    
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.

					    read more
					    
					  


						  

						    
House 1

						    
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.

						    read more
						    
						  

You can use data-info="YOUR_INFO" on your img tag for some short info

Step 3: Call the plugin

Call your plugin with the unique ID container.

$(document).ready(function(){
						    $('#demo-slider').SliderShowcase();
						});

Options

autoPlay
if true, slides will play automatically 
default: false
			options: boolean true/false
pauseOnHover
if autoPlay true, slides will pause on hover 
default: false
			options: boolean true/false
speed
duration during slides (ms) 
default: 5000
			options: integer
random
if autoPlay, slides will randomly play 
default: false
			options: boolean (true/false)
slide
if your slides go 'vertical' or 'horizontal' 
default: 'vertical'
			options: string
labelClass
className for label on img 
default: 'label label-info'
			options: string
showCount
show the current slider and total items 
default: true
			options: boolean true/false
showCountLabel
label for showCount current and total output (e.g. %c of %t) 
default: '%c / %t'
			options: string
prevKey
use key for previous slide Javascript Key Code 
default: 37
			options: integer
nextKey
use key for next slide Javascript Key Code 
default: 39
			options: integer
prevBtn
image or text for next button 
default: 
			options: string
nextBtn
image or text for previous button 
default: 
			options: string
backgroundImage
specifies the size of the background images. Background Size Property 
default: null
			options: string
responsive
Options array with settings for responsive.
breakpoint: settings will be used if viewport is smaller or same as breakpoint
if sliderHeight is not given, it will use viewport full height.
imageHeight will change the height of the image 
default:
			{
				  breakpoint: 768,
				  settings: {
				    imageHeight: 400
				  }
			},
			{
				  breakpoint: 480,
				  settings: {
				    imageHeight: 200
				  }
			}
BUY THIS SCRIPT