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.

    Use "carousel" to activate carousel mode for the slider.
      The maximum number of items that should be visible at any given time.
        The spacing between the items.
          The carousel won't have an end or a beginning, and instead will just repeat infinitely. Options are "on" and "off".
          • 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.
            Apply rounded corners to the individual slides.
            • leftcenter
            • right
            The starting point of the 1st slide.
            • on
            • off
            Use in combination with the "vary_fade" option below to allow for transparency of non-active items.
            • 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.
              Rotates the non-active items creating a traditional 3D carousel effect. Accepts a number between 0-360
              • 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.
                Scale the non-active items down by a certain percentage. Accepts a number between 0-100.
                • 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.

                    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