< < Return to Davide Caffaratti blog
MooSlider
Made simple create slide content !
MooSide is a simple class for made simple have your slider created by Davide Caffaratti http://davidecaffaratti.com
With his configuration the slide all slide hare closed:
window.addEvent('domready', function() {
var slider = new MooSlider('.slide', {
createToggle: true,
tagToggle: 'a',
cssHide: '.hide',
cssToggle: '.toggle',
slideDuration:340,
slideMode: 'vertical',
slideTransitions: Fx.Transitions.Pow.easeOut,
textOpen: '+ View more',
textClose: '- Close more',
elementsOpen: []
});
});
This is the slide 1
Lorem ipsum dolor sit amet, adipiscing elit. Nunc at lectus. Mauris libero. Phasellus at dui vitae
enim sodales viverra. Phasellus pharetra commodo nisi. Nunc sed turpis. Cras lacus. Donec ac lectus
eu mauris ultrices dignissim. Integer elit. Suspendisse quis leo. Nulla diam.
Lorem ipsum dolor sit amet, adipiscing elit. Nunc at lectus. Mauris libero. Phasellus at dui vitae
enim sodales viverra. Phasellus pharetra commodo nisi. Nunc sed turpis. Cras lacus. Donec ac lectus
eu mauris ultrices dignissim. Integer elit. Suspendisse quis leo. Nulla diam.
This is the slide 2
Lorem ipsum dolor sit amet, adipiscing elit. Nunc at lectus. Mauris libero. Phasellus at dui vitae
enim sodales viverra. Phasellus pharetra commodo nisi. Nunc sed turpis. Cras lacus. Donec ac lectus
eu mauris ultrices dignissim. Integer elit. Suspendisse quis leo. Nulla diam.
This is the slide 3
Lorem ipsum dolor sit amet, adipiscing elit. Nunc at lectus. Mauris libero. Phasellus at dui vitae
enim sodales viverra. Phasellus pharetra commodo nisi. Nunc sed turpis. Cras lacus. Donec ac lectus
eu mauris ultrices dignissim. Integer elit. Suspendisse quis leo. Nulla diam.
With his configuration the slide 4 and 6 hare opened:
window.addEvent('domready', function() {
var slider = new MooSlider('.slide1', {
createToggle: true,
tagToggle: 'a',
cssHide: '.hide',
cssToggle: '.toggle',
slideDuration:600,
slideMode: 'vertical',
slideTransitions: Fx.Transitions.Bounce.easeOut,
textOpen: '+ View more',
textClose: '- Close more',
elementsOpen: ['slide4','slide6']
});
});
This is the slide 4
Lorem ipsum dolor sit amet, adipiscing elit. Nunc at lectus. Mauris libero. Phasellus at dui vitae
enim sodales viverra. Phasellus pharetra commodo nisi. Nunc sed turpis. Cras lacus. Donec ac lectus
eu mauris ultrices dignissim. Integer elit. Suspendisse quis leo. Nulla diam.
Lorem ipsum dolor sit amet, adipiscing elit. Nunc at lectus. Mauris libero. Phasellus at dui vitae
enim sodales viverra. Phasellus pharetra commodo nisi. Nunc sed turpis. Cras lacus. Donec ac lectus
eu mauris ultrices dignissim. Integer elit. Suspendisse quis leo. Nulla diam.
This is the slide 5
Lorem ipsum dolor sit amet, adipiscing elit. Nunc at lectus. Mauris libero. Phasellus at dui vitae
enim sodales viverra. Phasellus pharetra commodo nisi. Nunc sed turpis. Cras lacus. Donec ac lectus
eu mauris ultrices dignissim. Integer elit. Suspendisse quis leo. Nulla diam.
This is the slide 6
Lorem ipsum dolor sit amet, adipiscing elit. Nunc at lectus. Mauris libero. Phasellus at dui vitae
enim sodales viverra. Phasellus pharetra commodo nisi. Nunc sed turpis. Cras lacus. Donec ac lectus
eu mauris ultrices dignissim. Integer elit. Suspendisse quis leo. Nulla diam.