1. Home
  2. Docs
  3. Creative Elements
  4. EA Image Scroller

EA Image Scroller

How to Configure and Style Image Scroller

You can now apply smooth scrolling effects for the background images using EA Image Scroller. With its auto or manual scrolling capability, you can easily make your website interactive for your visitors.

Table of Contents:

  1. How to Activate Image Scroller
  2. How to Configure the Content Settings
        2.1. Vertical
    2.2. 
    Horizontal
  3. Final Outcome

1. How to Activate Image Scroller

To use this Essential Addons element, find the EA Image Scrollerelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Image Scroller’ into the Drag widget hereor the ‘+’ section.


After you are successfully done with step 1, this is how the element is going to look like.

2. How to Configure the Content Settings

From the ‘Content’ tab, you can add your preferred ‘Background Image’. Besides,  you can use the dropdown menu to choose a Scrolling direction for the image out of these two: Vertical & Horizontal.

2.1. Vertical

From this section, you can change the height of the Image Container. Make sure that the ‘Container Height’ is less than the image height itself. With ‘Vertical’ direction selected, your image will be scrolled from up to down and vice versa.

You can use the toggle to turn on or off the ‘Auto Scroll’ option. If it’s enabled, then simply just hover your mouse over the ‘Background Image’ and you will see the Scrolling effect in real time.

Besides, you can change the ‘Scroll Duration’ as well. The lower the number is, the faster the ‘Scrolling’ effect will be.

If you disable the ‘Auto Scroll’ option, a navigation bar will appear. You can simply just drag it to Scroll through the whole image.

Click to See Live Demo

2.2. Horizontal

From this section, you can change the height of the Image Container. Make sure that the ‘Container Height’ is less than the image height itself. With ‘Horizontal’ direction selected, your image will be scrolled from right to left and vice versa.

You can use the toggle to turn on or off the ‘Auto Scroll’ option. If it’s enabled, then simply just hover your mouse over the ‘Background Image’ and you will see the Scrolling effect in real time.

Besides, you can change the ‘Scroll Duration’ as well. The lower the number is, the faster the ‘Scrolling’ effect will be.

If you disable the ‘Auto Scroll’ option, a navigation bar will appear. You can simply just drag it to Scroll through the whole image.

3. Final Outcome

By following the basic steps, you can configure your Image Scroller as per your preference. Simply just hover your mouse over the image, you will be able to view the nice scrolling effect.

This is how you can easily implement smooth ‘Scrolling’ effect on your background images using EA Image Scroller.

Tags , ,

How can we help?