Magic Slideshow for Magento 2
Live Demo
Magic Slideshow allows you to display multiple images in your store. You can place Magic Slideshow widget at any part of the page and display images with a description. There are two types of animations available – fade in/fade out and slideshow. Each slideshow image can have a separate URL link for visiting a page.
The amazing thing about this module is that it adapts to the viewing device resolution. That means if a user is viewing the slideshow on a smartphone or a laptop, the images will adjust its resolution and size accordingly. There will be no stretching or cropping of the images, the images will look beautiful on every device.
Features
- 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.
- Set height : width ratio.
- The slideshow images are responsive.
- The module source code is open for customization.
Installation
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 the successful installation, you have to run these commands in the Magento2 root directory:
First command – php bin/magento setup:upgrade
Second Command – php bin/magento setup:di:compile
Third Command – php bin/magento setup:static-content:deploy
After running the commands, you have to flush the cache from Magento admin panel by navigating through->System->Cache management as shown below.
Placing the Images
After 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 and paste the image files in this folder.
Widget Configuration
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|
Ratio of Height: Width – Select the ratio of height to width. Options available –
- Default
- 1:1
- 1:2
- 1:3
- 1:4
- 1:5
- 3:4
For eg, if the width is set as 600 and ratio is selected as 1:2, then, height will be 300.
Default Height of the Image – Enter the height of the widget. e.g 400 (Note – This option is available when ‘Default’ option is selected for ‘Ratio of Height : Width’.
Width – Enter the width of the widget. e.g 600
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.
User Front-End View
Here’s how Magic Slideshow Widget will appear on the front-end. The slideshow widget is showing the description on top the image.
Mobile Responsive
The Magic Slideshow extension works superbly well on any type of devices. The images will automatically adapt their size according to the viewing device resolution.
Magic Slideshow – Tablet View
Thank you for viewing the blog for the particular extension, if you have any further query please visit uvdesk.com