15. Magento. How to manage Revolution slider

Good news for all on-line store keepers! This tutorial will teach you how work with Revolutionslider in your Magento store:

To configure your store slideshow, please go to CMS -> Glace Revolutionslider in Magento admin panel:

 

Click on a Slider to open it:

Let us describe major options that Revolutionslider has and how to work with them.

Under Revolutionslider Information on the left you will see various tabs. We will describe key options of each tab one by one:

 

General tab

1. Title of the slider is set in the Name field.
2. Under Status field you may enable or disable slideshow simply by picking corresponding option from the drop down.
3. In the next field you may change Delay for switching between the slides. This value is to be set in milliseconds.
4. In the next four fields you may enable or disable Touch option, Stop on hover option and Shuffle mode for your slideshow. As well as enable or disable Stop Slider option. Mark radio button with appropriate value to do it.
5. Select Stop after Loops option if you want your slider stop changing after the cycle is finished.
6. If you want your slider animation to stop on a certain slide, type number of that slide in Stop at Slide field.
7. Pick the type of slider in the next Slider type field. Mark Fixed if you want your slider to have a fixed position on a web page, Responsive if it has to be responsive or Full width if you want it to occupy the full width.
8. Next two fields Slider Width and Slider Height allow you to choose custom dimensions for your slider.
9. Next fields allow to adjust certain Slider Width for certain Screen Width. You may fill several fields at the same time to make your slider look different on various screen resolutions: 

Now let us show how to manage slider images and their caption under Images tab.

1. To change certain slide image, press Choose file button field:
2. Pick the image that you want instead of the old one and press Choose file button:
   
3. Pick up the Transition effect for your slide from the drop down. There is a small grey square on the left that will help you to imagine how each transition looks like:
4. In the Text/HTML section you may change your slides caption. Each text section like txt-1, txt-2, etc. has its own css styles which define their appearance at the front end.
5. Set time in milliseconds for each text part animation to appear and stop in Start and Stop fields and its position from the Left and Top parts of the slide.
6. In the next two drop downs choose Animation affect and Easing for a certain slide. After that set Speed of that slide appearance in milliseconds:
7. In case you need to add or delete certain text block from a slide, press Add text or Delete text button:
   
8. In case you need to add or delete certain image from a slide, press Add image or Delete image button:
   

Position tab

1. To set the desired position of your slider on the page, pick one of those options in the Position on the page drop down. Your slider may be positioned in the Center, on the Left or on the Right side.
2. It is also possible to set custom values for Margins of your slider. In our case they are set to 0:

Appearance tab

1. From the first drop down choose Shadow type from available options. Set this value to No shadow if you don’t want any.
2. Select if you want to Show timer line of your slider and choose Timer line position. It can be either Top or Bottom in our case.
3. Set Background color of the slider and type the value for slider Padding (border) in case you need it.
4. There is also an option to add Background image for your slider. If you want to use this option, set it to Yes and type Background Image URL in the next field:
   

Navigation tab

This tab reflects how your slider navigation appears at the front end.

1. From the first drop down you can choose Navigation type: Bullet or Thumb. Choose None if you do not want any.
2. Navigation Arrows can be located Next to Bullets or Vertical Centered. Pick None to hide them.
3. Pick up Navigation styles to taste from the next drop down.
4. With the help of the next two lines you can adjust vertical and horizontal Navigation offset. Type values in pixels.
5. Pick Always show navigation if you want it appeared at the front end all the time. In case you do not – pick No. In the next Hide Navigation After line set the time of the navigation showing duration in milliseconds:

There is an option to set Thumbnail width, Thumbnail height in pixels and Thumbnail Amount for your slider in Thumbnail section:

 

In Mobile visibility section you may hide slider for devices with screen size smaller than certain width. The value in pixels needs to be inserted in Hide Slider Under Width field. There is also an option to Hide all layers under certain width:

Troubleshooting tab allows you to enable JQuery no conflict mode to avoid conflicts with other JS libraries:

 

After you have performed all changes, press Save Slideshow button in the top right corner to preserve the changes. In case you need to delete current slideshow, press Delete slideshow button:

Refresh the front end to see the changes.