Magic Slideshow for Magento 2

• Set the transition time between the images.
• Display description for every image – at top or bottom.
• Two types of animation effects- slideshow and fade in-out
• Enter URL link for every slideshow image.
• Set the height and width of the slideshow widget.
• The slideshow images are responsive.
• The module source code is open for customization.

To install this extension, please follow each and every step carefully as follows:

Step 1:

After extracting the downloaded zip file and you will get the src folder. Inside src folder, you will find the app folder, copy the app folder to the Magento2 root directory. Please view the below screenshot.

Step 2:

After copying the app folder, you need to run the commands in the Magento2 root directory. Please view the below screenshots:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

Step 3:

After running the commands, you need to flush the cache and reindex all from the Magento2 admin panel. Navigate through System>Cache Management. Click Flush Magento Cache button as shown below:

After the module installing the module, you need to place the images for the slideshow widget. Please go to the root directory of Magento and open the pub folder. Open media folder as visible in the screenshot below:

Create a new folder named as MagicSlideshow inside media folder

Then create Images folder inside MagicSlideshow folder.

Create different folders for every different slideshow widget. Please view the screenshot below:

Now copy the image files in this folder.

After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of the pages where you want to display the slideshow widget.

Go to Content section and click Insert Widget icon, a pop-up window will appear.

Select the Widget Type as Magic Slide Show from the list. Click Insert Widget button.

Now you need to configure the following options for the widget:

Transition Time – Set the changing time for every slideshow image. e.g 3000.

Select top or bottom position for description – Select where you want to display the description. Options available – Top or Bottom.

Transition Effect – Select the animation effect – slideshow or fade in/out.

Links – Enter the URL links for the images. Please put | between the URLs and in the end.

e.g. http://webkul.com/|https://store.webkul.com/|

Description – Enter the description content to show for every image. Please put | between the descriptions and in the end.

e.g.Visit Webkul Home Page|Visit Webkul Store|

Height – Enter the height of the widget. e.g 400

Width – Enter the width of the widget. e.g 600

Responsive – Select Yes, to auto-size the images according to the resolution.

Folder Name – Enter the folder name where images are stored.

As you can see the widgets have been added to the page. Please click Save Page for applying your changes.

Here’s how Magic Slideshow Widget will appear on the front-end. The slideshow widget is showing the description on top the image.