Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

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.

sliderType
    Use "carousel" to activate carousel mode for the slider.
    maxVisibleItems
      The maximum number of items that should be visible at any given time.
      space
        The spacing between the items.
        infinity
          The carousel won't have an end or a beginning, and instead will just repeat infinitely. Options are "on" and "off".
          stretch
          • on
          • off
          Stretches the items to display across the entire width of the slider. Using this option, only one slide would ever be visible at a time.
          border_radius
            Apply rounded corners to the individual slides.
            horizontal_align
            • leftcenter
            • right
            The starting point of the 1st slide.
            fadeout
            • on
            • off
            Use in combination with the "vary_fade" option below to allow for transparency of non-active items.
            vary_fade
            • on
            • off
            Add transparency to non-active items, where the items closest to the center will be slightly transparent, and the items furthest away will more transparent.
            maxRotation
              Rotates the non-active items creating a traditional 3D carousel effect. Accepts a number between 0-360
              vary_rotation
              • on
              • off
              Rotate the non-active items based on how close they are to the center item. Items closest to the center will be rotated less, and items furthest away will be rotated more.
              minScale
                Scale the non-active items down by a certain percentage. Accepts a number between 0-100.
                vary_scale
                • on
                • off
                Scale the non-active items based on how close they are to the center item. Items closest to the center will be scaled down less, and items furthest away will be scaled down the most.

                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 */
                    /* ****************** */
                 
                });

                Popular Solutions

                [ess_grid alias="wp-popular-solutions"]
                Impressum | Datenschutz