How do I Customize jQuery Slider for My Template?

E-mail Print PDF

Anything Slider

This plug-in has a variety of features both common for all slider scripts and specific new features:
• Autostart;
• Dynamic output pagination;
• Support for various transition effects between slides;
• Button stop / play;
• Support for the hash tags.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code:

The slider.js file contains these lines of code that make the slider work:

The script is well-commented so you can always get to know which attributes to change in order to customize the slider functionality.

HTML
When using this slide you just need to put a list of slides into the <div> tag with the .slider class.

Below you can see the HTML script representation:

Every list element (<li> tag) represents a slide. So in order to customize slider elements you will need to change images under the <li> tags.

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

"Cross-Fading" Slider

This is a Slider Script that uses cross-fading effect for slide change transition effects.

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

The gallery initialization is placed to the end of HTML coding (just before </body> closing tag) and contains all the necessary configuration values.


effect attribute defines slide transition effect:

•    default – no transition effect, just switch the image;
•    fade – fade effect;
•    slide – slides are shifting down.

fadeOutSpeed attribute defines slide transition speed:

•    default – 4 seconds;
•    fast – 8 seconds;
•    slow – 2 seconds.

rotate attribute defines slide rotation:

•    true – slides are showing continuously;
•    false – each slide is shown only once.

HTML
Below you can see the HTML script representation:

Make sure that the number of navigation buttons (<a> tags inside the <div> tag with .tabs style) should be equal to the number of slides.

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

Testimonials

Ich bin der Umsetzung einiger Module für die Titelseite. Ich komme wieder, wenn die Anpassung abgeschlossen ist. Danke!

--- Melanie

I purchased this virtuemart skin for my client's project. I also have to say thankyou for this beautiful template.!

--- Madelaine

Thank you for your time and help.  It's a very glad experience for buying a theme here.

--- Steve

Kan du förklara för mig hur man översätter fakturan i PrestaShop? Vi hittade ingen gemensam erfarenhet PrestaShop BBS.

--- Martin

Hvala vam za postavljanje flash za moj Magento početnu stranicu.

--- Stoklosa

 
You are here: FAQs How do I Customize jQuery Slider for My Template?