If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

“Coin” Slider

This is a Slider Script that can automatically cut images for creating various transition effects. You can find full installation and configuration instructions by following this link.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include the coin-slider.js script and the jQuery framework:

 

The <head> section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:

This script is initialized with a <div> element with the #coin-slider id. Script attributes define the following values:

•    width: 565 – width of slider panel;
•    height: 290 – height of slider panel;
•    spw: 7 – squares per width;
•    sph: 5 – squares per height;
•    delay: 3000 – delay between images in ms;
•    sDelay: 30 – delay between squares in ms;
•    opacity: 0.7 – opacity of title and navigation;
•    titleSpeed: 500 – speed of title appearance in ms;
•    effect: ‘ ‘ – transition effect, random by default (random, swirl, rain, straight);
•    navigation: trueprev/next and buttons;
•    links : true – show images as links;
•    hoverPause: true – pause on hover.

HTML
Below you can see the HTML script representation:

Each slide is an image (<img> tag), placed into a link (<a> tag). You can also add a slide description using the <span> element. In order to add a slide you will need to add the following structure:

CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles: