Features<\/h3>\n<\/div>\n<\/div>\n\n\n\n- Set the transition time between the images.<\/li>\n
- Display description for every image – at top or bottom.<\/li>\n
- Two types of animation effects- slideshow and fade in-out<\/li>\n
- Enter URL link for every slideshow image.<\/li>\n
- Set the height and width of the slideshow widget.<\/li>\n
- Set height : width ratio.<\/li>\n
- The slideshow images are responsive.<\/li>\n
- The module source code is open for customization.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
Installation<\/h3>\n<\/div>\n<\/div>\n\n\nTo install this extension, please follow each and every step carefully as follows:<\/p>\n
Step 1:<\/h3>\n
After extracting the downloaded zip file and you will get the src<\/strong> folder. Inside src<\/strong> folder, you will find the app<\/strong> folder, copy the app<\/strong> folder to the Magento2 root directory. Please view the below screenshot.<\/p>\n![\"Magento2](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-28_12-22-45.png\")
<\/p>\n
Step 2:<\/h3>\n
After the successful installation, you have to run these commands<\/strong> in the Magento2 root<\/strong> directory:<\/p>\nFirst command<\/strong> – php bin\/magento setup:upgrade
\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command1-upgrade-3.png\")
<\/a><\/p>\nSecond Command – <\/strong>php bin\/magento setup:di:compile
\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command2-compile-2.png\")
<\/p>\nThird Command – <\/strong>php bin\/magento setup:static-content:deploy
\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command3-deploy-1.png\")
<\/p>\nAfter running the commands, you have to flush the cache from Magento admin panel by navigating through->System<\/strong>->Cache management<\/strong> as shown below.<\/p>\n![\"Magento2](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-28_12-09-25.png\")
<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n\n\nPlacing the Images<\/h3>\n<\/div>\n<\/div>\n\n\nAfter 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<\/strong> folder. Open media<\/strong> folder as visible in the screenshot below:<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/MagicSlideShow.png\")
<\/a><\/p>\nCreate a new folder named as MagicSlideShow<\/strong> inside media<\/strong> folder<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/MagicSlideShow2.png\")
<\/p>\n
Then create images<\/strong> folder inside MagicSlideShow<\/strong> folder.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Magic.png\")
<\/a><\/p>\nCreate different folders for every different slideshow widget. Please view the screenshot below:<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/magic2.png\")
<\/a><\/p>\nNow copy and paste the image files in this folder.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/magic3.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nWidget Configuration<\/h3>\n<\/div>\n<\/div>\n\n\nAfter placing the images, please go to the admin backend panel Content>Pages<\/strong>. Click Edit<\/strong> any of the pages\u00a0where you want to display the slideshow widget.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/select-and-edit-page.png\")
<\/a><\/p>\nGo to Content<\/strong> section and click Insert Widget<\/strong> icon, a pop-up window will appear.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/edit-content.png\")
<\/a><\/p>\nSelect the Widget Type<\/strong> as Magic Slide Show<\/strong> from the list. Click Insert Widget<\/strong> button.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/select-widget-type.png\")
<\/a><\/p>\nNow you need to configure the following options for the widget:<\/p>\n
Transition Time<\/strong> – Set the changing time for every slideshow image. e.g 3000.<\/p>\nSelect top or bottom position for description<\/strong> – Select where you want to display the description. Options available – Top or Bottom.<\/p>\nTransition Effect<\/strong> – Select the animation effect – slideshow or fade in\/out.<\/p>\nLinks<\/strong> – Enter the URL links for the images. Please put |\u00a0<\/strong>between the URLs and in the end.<\/p>\ne.g. http:\/\/webkul.com\/|https:\/\/store.webkul.com\/|<\/p>\n
Description<\/strong> – Enter the description content to show for every image. Please put |<\/strong> between the descriptions and in the end.<\/p>\ne.g.Visit Webkul Home Page|Visit Webkul Store|<\/p>\n
Ratio of Height: Width<\/strong> – Select the ratio of height to width. Options available –<\/p>\n\n- Default<\/li>\n
- 1:1<\/li>\n
- 1:2<\/li>\n
- 1:3<\/li>\n
- 1:4<\/li>\n
- 1:5<\/li>\n
- 3:4<\/li>\n<\/ul>\n
For eg, if the width is set as 600 and ratio is selected as 1:2, then, height will be 300.<\/p>\n
Default Height of the Image<\/strong> – Enter the height of the widget. e.g 400 (Note – This option is available when ‘Default’ option is selected for ‘Ratio of <\/em>Height : Width’.<\/em><\/p>\nWidth<\/strong> – Enter the width of the widget.\u00a0e.g 600<\/p>\nFolder Name<\/strong> – Enter the folder name where images are stored.![\"Magic](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Screenshot-2017-10-06_15.31.01.png\")
<\/a><\/p>\nAs you can see the widgets have been added to the page. Please click Save Page<\/strong> for applying your changes.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/widget-added.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nUser Front-End View<\/h3>\n<\/div>\n<\/div>\n\n\nHere’s how Magic Slideshow Widget will appear on the front-end. The slideshow widget is showing the description on top the image.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Magic-slideshow-frontend.png\")
<\/a><\/p>\nMobile Responsive<\/h3>\n
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.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/iphone7spacegrey_landscape-1.png\")
<\/a><\/p>\nMagic Slideshow – Tablet View<\/strong><\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/ipadair2_spacegrey_portrait-1.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\nThank you for viewing the blog for the particular extension, if you have any further query please visit uvdesk.com<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
- \n
- Set the transition time between the images.<\/li>\n
- Display description for every image – at top or bottom.<\/li>\n
- Two types of animation effects- slideshow and fade in-out<\/li>\n
- Enter URL link for every slideshow image.<\/li>\n
- Set the height and width of the slideshow widget.<\/li>\n
- Set height : width ratio.<\/li>\n
- The slideshow images are responsive.<\/li>\n
- The module source code is open for customization.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
Installation<\/h3>\n<\/div>\n<\/div>\n
\n\nTo install this extension, please follow each and every step carefully as follows:<\/p>\n
Step 1:<\/h3>\n
After extracting the downloaded zip file and you will get the src<\/strong> folder. Inside src<\/strong> folder, you will find the app<\/strong> folder, copy the app<\/strong> folder to the Magento2 root directory. Please view the below screenshot.<\/p>\n
<\/p>\nStep 2:<\/h3>\n
After the successful installation, you have to run these commands<\/strong> in the Magento2 root<\/strong> directory:<\/p>\n
First command<\/strong> – php bin\/magento setup:upgrade
\n<\/a><\/p>\nSecond Command – <\/strong>php bin\/magento setup:di:compile
\n<\/p>\nThird Command – <\/strong>php bin\/magento setup:static-content:deploy
\n<\/p>\nAfter running the commands, you have to flush the cache from Magento admin panel by navigating through->System<\/strong>->Cache management<\/strong> as shown below.<\/p>\n
<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nPlacing the Images<\/h3>\n<\/div>\n<\/div>\n
\n\nAfter 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<\/strong> folder. Open media<\/strong> folder as visible in the screenshot below:<\/p>\n
<\/a><\/p>\nCreate a new folder named as MagicSlideShow<\/strong> inside media<\/strong> folder<\/p>\n
<\/p>\nThen create images<\/strong> folder inside MagicSlideShow<\/strong> folder.<\/p>\n
<\/a><\/p>\nCreate different folders for every different slideshow widget. Please view the screenshot below:<\/p>\n
<\/a><\/p>\nNow copy and paste the image files in this folder.<\/p>\n
<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nWidget Configuration<\/h3>\n<\/div>\n<\/div>\n
\n\nAfter placing the images, please go to the admin backend panel Content>Pages<\/strong>. Click Edit<\/strong> any of the pages\u00a0where you want to display the slideshow widget.<\/p>\n
<\/a><\/p>\nGo to Content<\/strong> section and click Insert Widget<\/strong> icon, a pop-up window will appear.<\/p>\n
<\/a><\/p>\nSelect the Widget Type<\/strong> as Magic Slide Show<\/strong> from the list. Click Insert Widget<\/strong> button.<\/p>\n
<\/a><\/p>\nNow you need to configure the following options for the widget:<\/p>\n
Transition Time<\/strong> – Set the changing time for every slideshow image. e.g 3000.<\/p>\n
Select top or bottom position for description<\/strong> – Select where you want to display the description. Options available – Top or Bottom.<\/p>\n
Transition Effect<\/strong> – Select the animation effect – slideshow or fade in\/out.<\/p>\n
Links<\/strong> – Enter the URL links for the images. Please put |\u00a0<\/strong>between the URLs and in the end.<\/p>\n
e.g. http:\/\/webkul.com\/|https:\/\/store.webkul.com\/|<\/p>\n
Description<\/strong> – Enter the description content to show for every image. Please put |<\/strong> between the descriptions and in the end.<\/p>\n
e.g.Visit Webkul Home Page|Visit Webkul Store|<\/p>\n
Ratio of Height: Width<\/strong> – Select the ratio of height to width. Options available –<\/p>\n
- \n
- Default<\/li>\n
- 1:1<\/li>\n
- 1:2<\/li>\n
- 1:3<\/li>\n
- 1:4<\/li>\n
- 1:5<\/li>\n
- 3:4<\/li>\n<\/ul>\n
For eg, if the width is set as 600 and ratio is selected as 1:2, then, height will be 300.<\/p>\n
Default Height of the Image<\/strong> – Enter the height of the widget. e.g 400 (Note – This option is available when ‘Default’ option is selected for ‘Ratio of <\/em>Height : Width’.<\/em><\/p>\n
Width<\/strong> – Enter the width of the widget.\u00a0e.g 600<\/p>\n
Folder Name<\/strong> – Enter the folder name where images are stored.
<\/a><\/p>\nAs you can see the widgets have been added to the page. Please click Save Page<\/strong> for applying your changes.<\/p>\n
<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nUser Front-End View<\/h3>\n<\/div>\n<\/div>\n
\n\nHere’s how Magic Slideshow Widget will appear on the front-end. The slideshow widget is showing the description on top the image.<\/p>\n
<\/a><\/p>\nMobile Responsive<\/h3>\n
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.<\/p>\n
<\/a><\/p>\nMagic Slideshow – Tablet View<\/strong><\/p>\n
<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\nThank you for viewing the blog for the particular extension, if you have any further query please visit uvdesk.com<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"