Using skins

The slider offers you several main skins to choose from, and also a few skins just for the scrollbar. When you want to apply one of these skins, you first need to include the CSS file in the header and then use the 'skin' or 'scrollbarSkin' properties to specify the skin that was included in the header. Let's say you want to include the 'minimal-small' skin for the slider and the 'scrollbar-3-light' skin for the scrollbar. For this, you need to include the minimal-small.css and scrollbar-3-light.css files in the header. Also, don't forget about the advanced-slider-base.css file.

<link rel="stylesheet" type="text/css" href="css/advanced-slider-base.css" />
<link rel="stylesheet" type="text/css" href="css/minimal-small/minimal-small.css" />
<link rel="stylesheet" type="text/css" href="css/scrollbar-3-light/scrollbar-3-light.css" />

...

$('#my-slider').advancedSlider({
    width:750,
    height:345,
    skin:'minimal-small',
    scrollbarSkin:'scrollbar-3-light',
    thumbnailsType:'navigation',
    thumbnailScrollbar:true
});

If you open the minimall-small.css or the scrollbar-3-light.css files, you will see some information about the skin.

The 'Class' information gives you the value that you will need to specify for the 'skin' property.

The CSS files are commented and the selectors are also suggestive, so it should be pretty easy to customize the skin. Also, you are being provided with the layered PSD (or PNG in some cases) files, so that you're able to modify the size and color of the graphic elements. These files are in 'source files/_dev/css'.

/*
    Skin Name: Minimal Small
    Class: minimal-small
    Description: Minimal Small skin for Advanced Slider jQuery plugin
    Author: David
*/
     
     
/* MAIN SLIDE */
     
.minimal-small .slide-wrapper {
    background-color:#000;
    border:8px solid #000;
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk