Multiple items
For the horizontal slide effect – you may choose to display multiple items in the slider.
TinSlide(document.getElementById('slider'), {
effects: {
slideHorizontal: {
numVisible: 4,
centerSelected: false // Default
}
}
});
Centering and showing all items
The centerSelected option puts the currently selected item in the center and the others around it, instead of presenting them left to right.
By default TinSlide only animate items currently visible in the slider view, and hides the others. You can disable this by using hideItems: false. If you also turn off slider cropping, using cropContainer: false, you will see all items outside of the container (if you have not disabled the horizontal sliding effect).
The example below uses this to create "ghost" items. It also utilizes the classes .tin-slide-selected and .tin-slide-outside, to highlight the selected item and to add the "ghost" effects.
TinSlide(document.getElementById('slider'), {
cropContainer: false,
hideItems: false,
effects: {
slideHorizontal: {
numVisible: 3,
centerSelected: true
},
scale: {
on: true,
max: 1.2,
min: 0.9,
maxAt: 0,
minAt: 1.3
}
},
generate: {
dots: {
on: false
}
}
});
CSS
#slider > div {
transition: opacity 200ms ease-out, filter 200ms ease-out, box-shadow 200ms ease-out;
}
.tin-slide-outside {
opacity: 0.1;
filter: grayscale(100%);
}
.tin-slide-selected {
box-shadow: 0 3px 25px rgba(0, 0, 40, 0.4);
}
Advanced effects settings
The previous example uses advanced effects settings to fine tune scaling of the items. These advanced settings are available for the scale and fade effects:
max defines the maximum value.
min defines the minimum value.
maxAt defines the point at which the max value should be reached.
minAt defines the point at which the min value should be reached.
maxAt and minAt are offset values from the position as selected item. 0 means that the items is perfectly in position. 1 means that it is exactly one step (one item, or 100 %) away from being in position.
Using this knowledge, we can create something similar to the "ghosts" example above, without utilizing the .tin-slide-outside class.
TinSlide(document.getElementById('slider'), {
cropContainer: false,
hideItems: false,
effects: {
slideHorizontal: {
numVisible: 3,
centerSelected: true
},
scale: {
on: true,
max: 1,
min: 0.8,
maxAt: 0.5, // Max value is used when item is at, or between, selected position and one half step away.
minAt: 1.3 // Min value is used when item is 130 % (1.3 steps), or more, from selected position.
},
fade: {
on: true,
max: 1,
min: 0.1, // Min value – items are never completely faded out.
maxAt: 1, // Item is fully opaque when it is at, or between, selected position and one step away.
minAt: 2 // Min value is used when the item is two steps, or more, from selected position.
}
},
generate: {
dots: {
on: false
}
}
});