1. Calculate your Items
The number of visible items will always be based on the following formula:
total visible items = slider width / (slider’s gridwidth + carousel item spacing)
As an example, let’s say your slider is placed inside your web page’s content container, which has a normal width of 960px. to display 3 carousel items at the same time inside the slider, with 20px spacing between them, set your gridwidth to 300.
Or, if your slider is meant to be fullwidth, the number of visible items would then vary depending on the user’s screen size, based on the calculation above.
2. Declare your Carousel Settings
Quick Note
Carousels are setup via settings in the slider's main JavaScript section.
- on
- off
- leftcenter
- right
- on
- off
- on
- off
- on
- off
- on
- off
jQuery('#rev_slider_1').show().revolution({
sliderType: 'carousel',
carousel: {
maxVisibleItems: 5,
space: 10,
infinity: 'on',
stretch: 'off',
border_radius: '10px',
horizontal_align: 'center',
fadeout: 'off',
vary_fade: 'off',
vary_rotation: 'off',
maxRotation: 0,
vary_scale: 'off',
minScale: 50
},
/* ****************** */
/* settings continued */
/* ****************** */
});