Big Day Release: Magento Animated Slider

Magento Animated Slider does a fantastic job of making your pages look livelier and draws much needed attention to the messages you want to get to your customers. With this module aside from simple static images you are able to animate the slide content from the text content to multiple images appearance on the slide.

Key features:

Create animated sliders/slides blocks;
Add text and image blocks to any slide;
Use slide content as hyperlinks to forward customers to other pages;
Put slider blocks as widgets to any CMS page and place;
Customizable buttons and pagination position;
Customizable animation, size, fonts and colors;
Fully responsive with touchscreen Support;
Compatible with all modern browsers;
Amazing animation effects.

Give your website a new look and feel with the Animated Slider module. Create colorful animated sliders and put them on CMS pages to enhance visual performance and attract customers’ attention.

Sliders provide a good solution to present products in a new way to your visitors. If you are running some sale, promotion or simply want to attract users to certain products – sliders are one of the best ways to reach the goal.

Animated Slider module is equipped with a number of settings which can help you create awesome slider blocks exactly in the way you want them to look like!

You can create several sliders and simply put them as widgets to any CMS page of your store. Each slider can contain as many slides with images and text information as you want. Moreover, you can hyperlink each image or text block on the slide so customers will be forwarded directly to a product page or some other place you need once they click on the content.

How to Use

Now let us show you how the module works and how slides will appear and work on your website.

Animated slide blocks also show up on their specified places. You can create unlimited number of animated blocks with special effects and place them in different places and in various combinations, either side by side and next to each other or even above each other.

Pagination and arrow buttons have one of predefined styles and are displayed in according with the settings.

You can also create small and compact slides which can be located on any place of your webpage as a simple widget!

How to Configure

To enable and configure the module log into Magento administration panel and go to System -> Configuration -> Animated Slider ->click Settings and set it up as Enable.

This section also displays the list of predefined style packs which you get with the module by default.

Managing and creating new sliders

To manage sliders or create new ones go to CMS -> Animated Slider -> Sliders.

In this section you can find the list of existing sliders which you can manage and customize or create and add a new slider.

Magento Custom Development

Take your online store to the next level with BelVG Magento Custom Development

Visit the page

To create a new slider click the Add New button.

Slider Editor is equipped with a bunch of settings which require your configuration for a slider to be created. This includes:

Settings tab

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Igor

Slider name – give name to your new slider;
Default width – set width dimensions (in pixels);
Default height – set height dimensions (in pixels);
Buttons style – choose style to apply for your slider buttons;
Pager style – choose style to apply for pagination buttons;
Buttons position – set position of buttons on the slider;
Pager position – define place of pagination buttons on the slider;
Controls display – specify how buttons will appear on the slider;
Scroll type – choose the way slides will be replacing each other in the slider;
Scroll easing– choose the manner how slides will be replacing each other;
Scroll speed – specify how fast slides should be changed in the slider;
Auto Scroll– enable this option if you want the module to change slides automatically. If you switch on this feature the module will show up the following settings to configure:
- Delay – time (in milliseconds) after which slides start appearing on the slider;
- Stop – here you can make your slides animation stop upon mouse hover. It is disabled by default.
- Order– choose whether your slides will be running backward or forward within the slider.

Slides tab

This tab shows the list of all slides which have been created in the module.

Simply select those you wish to include into your new slider and click Save.

If you want to edit any slider – click the Edit button which is next to each slide, and you will be redirected to the Slide Editor where you will be able to apply the changes you want.

Managing and creating new slides

To edit slides and create new ones go to CMS -> Animated Slider -> Slides.

There you will find all slides which have been created so far in this module.

To create a new slide click the Add New button.

This section also contains certain settings which are necessary to configure.

Ecommerce Development

Take your online store to the next level with BelVG Ecommerce Development

Visit the page

Settings tab

Slide Name – name your new slide;
Sort Order – set order in which your slides will appear in a slider;
Add Image – upload an image to serve as slide background;
Color – choose background color;

Animation blocks

In this tab you can create and add special effects such as text and image animations which will be displayed on a particular slide.

The tab offers to add two types of effects onto your slide: text and image.

Once you select and add a block you will need to set up basic configurations to make it work and show up in the way you want it.

The settings for Image Block include:

Position X/Y – specify the position of a block on a slide;
Sort Order – give number for your block [0…9999] to make it appear either below or above other blocks. A block with a smaller number (ex. 1) will appear on the slide above other blocks with bigger numbers;
Effect – set us special animation effect for a block. You can test the effect and see how it works by clicking on the Preview Area
Speed – set up speed of animation;
Delay – set up time delay before animation starts;
Width/height – indicate dimensions of your block;
Image/content – upload a picture or enter text you wish to show up in the block;
Custom style – if you are familiar with CSS you can add your own custom styles;
Link – add hyperlink where you want your customers to get redirected once they click this block.

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.

Talk to Igor

If you choose to add a text block, the module will show up a bunch of additional settings to configure:

Family – select font type for the text you add;
Size – choose text size;
Style – type your text in italics;
Thickness – define type of thickness for text characters;
Color – text color configuration.

If you want to check out the results of your work you can click the Preview Slide button and see how actually all your blocks will work in reality.