Main Slider. Change slider images, Add slider

The Revolution Slider is a very advanced slider module with the main purpose of displaying banner images with advanced captions (images, text, videos). Use the Revolution Slider if you need sliders in boxed or fullwidth mode and fancy animations for both the main slides and the captions.

If you don’t need advanced slider functionality like animated captions or fullwidth mode, you can use the much lighter flipkart Slider module to slide your images.

The Revolution Slider can be added to any layout in all positions.


Image Dimensions (Fullwidth)

The fullwidth mode extends the slider to 100%, past the limits of your site container width. To set up a fullwidth slider, turn ON the Fullwidth option in the Top / Bottom Settings within the Create module page. Fullwidth modules can only be added to the Top or Bottom positions.

The minimum recommended image width for fullwidth sliders is around 1500px to 1920px. The image will always stretch to fill 100% of the screen width so the slider will crop your images accordinly. The image height can be any size, you declare that in the Slider Height field when you create the module.

Image Dimensions (Boxed)

The boxed mode extends the slider to the edges of your site container and does not crop your images if they are made at the correct dimensions. To use the slider in boxed mode turn OFF the Fullwidth option in the Top / Bottom Settings within the Create module page.


The exact image width for boxed mode depends on 3 factors: your Site Width, Site Layout and the Position you intend to add the module to. The image height can be any size, you declare that in the Slider Height field when you create the module.The Site Width is in Settings > Global > General > Layout > Site WidthThe Site Layout is in Settings > Global > General > Layout > Site Layout


Follow these guidelines to find out the exact width your images need to be so no cropping will occur.


General Options
This is the page where you create the module. Additional styling for the Revolution Slider is done in Settings > Modules > Slider.


  • 1 Module Name – This is the module name that will appear on the Add to Layout¬†or while adding banner to home page in “Advance Grid” Menu.
  • 2 Slider Height – Indicate the height of the slider. Make all images the same width and height.
  • 3 Slide Duration – The time a slide stays visible before moving to the next one. Each slide duration can be overriden in the Slide options.
  • 4 Disable on Mobile – Optionally disable the module on mobile devices.
  • 5 Hide Captions on Mobile – Optionally disable only the captions on mobile devices.
  • 6 Times – The growing bar representing the slide duration.
  • 7 Preload Images – Loads each slide image on demand instead of all at once.

Navigation Options
  • 1 Navigation Type – Choose from bullets or image thumbnails.
  • 2 Show on Hover - Show navigation only when hovering over the slider module.
  • 3 Navigation Arrows – Displays the left/right arrows next to the bullets or on each side of the slider module.
  • 4 Bullets Horizontal Align - Bullets horziontal alignment.
  • 4 Bullets Vertical Align - Bullets vertical alignment.
  • 6 Navitation HOffset - Can offset the navigation from the edges horizontally.
  • 6 Navitation VOffset - Can offset the navigation from the edges vertically.
  • 8 Thumb Dimensions – Can specify exact thumb dimensions (if Navigation Type: Image is chosen).
  • 9 Thumb Amount - How many thumbs should be visible within the masked container (if Navigation Type: Image is chosen).

Top / Bottom Settings
  • 1 Background – Background Settings for the Top or Bottom container holding the module.
  • 2 Fullwidth - Can make the module fullwidth to extend to 100% of the browser width, past the limits of the site container.
  • 3 Margin – Optionally add top and bottom margins to the module.

These options only apply if you add the module to the Top or Bottom positions.
Slide
  • 1 Slide Name – The name that appears in the blue title bar of each slide.
  • 2 Slide Image – The main slide image.
  • 3 Slide Thumb – Optionally add a different thumb image for each slide. Leave empty to automatically use the main image as the thumb as well.
  • 3 Slide Transition – The animation used to transtions from one image to another. In the Revolution Slider this is done per slide so each image can have different animations.
  • 5 Easing – Allows you to alter the animation effect (the acceleration and breaking of the transition).
  • 6 Slot Amount - The number the slide will be broken into to create tiled transitions. Do not use more than 3 to 5 here as the processing can get heavy. Leave empty for a single slot.
  • 4 Transition Speed – The speed at which the transition animates.
  • 7 Transition Delay – The duration a slide is visible before advancing to the next one. This overrides the General Options Slide Duration and it’s useful in situations where you have captions that need to animate in and out and you want the slide to wait for them.
  • 9 Link - Can make the entire image a link.
  • 10 Open in New Tab - Option to open the link in a new tab.
  • 11 Status - Turn the slide on/off.
  • 12 Sort Order – Move the slide before or after other slides.

Captions – Image
  • 1 Caption Title – The title that appears in the orange bar for each caption.
  • 2 Caption Type – There are 3 available caption types, each with its own settings.
  • 3 Image - The caption image.
  • 4 Position X – The caption horizontal end position in pixels from the top left corner of the site container. Play around with these values to position the caption precisely where you want it.
  • 5 Position Y – The caption vertical end position in pixels from the top left corner of the site container. Play around with these values to position the caption precisely where you want it.
  • 6 Link - Can make the image a link.
  • 7 Open in New Tab - Option to open the link in a new tab.
  • 8 Status - Turn the caption on/off.
  • 9 Sort Order – The caption Z-index, allows to position captions above or below one another in case they overlap.

Captions – Text
  • 1 Caption Title – The title that appears in the orange bar for each caption.
  • 2 Caption Type – There are 3 available caption types, each with its own settings.
  • 3 Text – The caption text.
  • 4 Font – The font settings for the caption.
  • 5 Background Color – Optoinal background color for the caption element.
  • 6 Hover Font Color – Hover color if the caption is a link.
  • 7 Hover Background Color – Hover background color if the caption is a link.
  • 8 Position X – The caption horizontal end position in pixels from the top left corner of the site container. Play around with these values to position the caption precisely where you want it.
  • 9 Position Y – The caption vertical end position in pixels from the top left corner of the site container. Play around with these values to position the caption precisely where you want it.
  • 10 Link - Can make the image a link.
  • 11 Open in New Tab - Option to open the link in a new tab.
  • 12 Status - Turn the caption on/off.
  • 13 Sort Order – The caption Z-index, allows to position captions above or below one another in case they overlap.

Captions – Video
  • 1 Caption Title – The title that appears in the orange bar for each caption.
  • 2 Caption Type – There are 3 available caption types, each with its own settings.
  • 3 Video - Choose the source of your video.
  • 4 Video ID – For Youtube and Vimeo videos paste the video ID only (the number at the end of the url). For Local videos paste the relative path to your video and do not add the video extension at the end. For example you have a folder called “video” in the root Opencart installation with a “my_video.mp4″ video in it. The path you need to input would be video/my_video
  • 5 Full Size Video - If ON, extends the video width and height to the entire dimensions of the slide.
  • 6 Video Dimensions - If Full Size Video OFF, enter the dimensions of your video.
  • 7 Autoplay - Automatically starts the video withint the current slide.
  • 8 Autoplay First Time - Automatically starts the video only on the first cycle of slider. On additional loops the Autoplay is turned off.
  • 9 Position X – The caption horizontal end position in pixels from the top left corner of the site container. Play around with these values to position the caption precisely where you want it.
  • 10 Position Y – The caption vertical end position in pixels from the top left corner of the site container. Play around with these values to position the caption precisely where you want it.
  • 11 Status - Turn the caption on/off.
  • 12 Sort Order – The caption Z-index, allows to position captions above or below one another in case they overlap.

Captions Animation
  • 1 Animation In - Choose the intro animation for your caption.
  • 2 Easing In – Choose the easing the transition should use. Easing is the acceleration and breaking effect of the animation.
  • 3 Speed In – The speed at which the caption animates into view, in milliseconds.
  • 4 Delay In – The delay before the caption starts to animate in. Use it when you have multiple captions that need to animate sequentially one after another. If not declared, the caption will animate in as soon as the main slide becomes active.
  • 5 Animation Out – Choose the outro animation for your caption.
  • 6 Easing Out – Choose the easing the transition should use. Easing is the acceleration and breaking effect of the animation.
  • 7 Speed Out – The speed at which the caption animates out of view, in milliseconds.
  • 8 Delay Out – The delay before the caption starts to animate out. Use it when a caption should stay visible longer while other captions pass by. If nothing decalred the caption will animate out with the main slide.