Pi-slider - Simple jQuery image slider

The pi-slider is a very simple image slider built with jQuery. See the steps below for the installation. There are also several options to customize the slider.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="pi-slider/pi-slider.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="pi-slider/pi-slider.min.js"></script>

2. HTML

<div id="slider">
    <img src="image1.png" title="Caption here (optional)" data-href="Link here (optional)" />
    <img src="image2.png" title="Caption here (optional)" data-href="Link here (optional)" />
    <img src="image3.png" title="Caption here (optional)" data-href="Link here (optional)" />
</div>

3. JAVASCRIPT

$(document).ready(function() {
    $("#slider").piSlider({
        progressColor: '#f0f0f0'
    });
});

4. OPTIONS

The pi-slider has several options to change its appearance and behaviour. These options are listed below with a short description. Between the {braces} are the possible values for the options.

// displays a loading graphic before the slider fades in {true, false}
loader: true, 
// start image {number_of_image}
startImage: 1,
// autoplay or manual slides with arrows {true, false}
autoplay: true,
// continuous play of slides {true, false}
loop: true,
// play direction {true, false}
backwards: false,
// which effect to blend content {fade, slide}
effect: 'fade',
// duration of  each slide {time_in_ms}
duration: '8000',
// pause on hover {true, false}
pauseOnHover: false,
// displays a shadow below the slider {true, false}
shadow: true,
// enables/disables fullsize view of the slider {true, false}
fullsize: false,
// sets progressbar color {color_word, hex_code}
progressColor: 'grey',
// shows/hides the progressbar {true, false}
progressBar: true,
// sets the position of the progressbar {top, bottom}
progressPosition: 'bottom',
// shows/hides control arrows {true, false}
arrows: true,
// shows/hides captions {true, false}
captions: true

You have to write (or copy) the options into the JavaScript code from the last step of the Installation. For every option write a new line and don't forget the comma at the end of each line (except the last line).

...
$("#slider").piSlider({
    option_name: value,
    option_name: value,
    option_name: value,
    ...
});
...