3.1 Module Demo

You could see the appearance of SM Image Slider module as following:

3.2 Module Configuration

Notes: We used the images of module’s installation on Magento 2.0.x to illustrate

In the Administrator Page, navigate to Stores -> Settings -> Configuration and find SM Image Slider to configure.
The parameters are divided into the following groups:

• General settings
• Source Options
• Product Options - For Theme 2
• Image Options
• Effect Options
• Advanced Options

Let’s look at the parameters in detail:

General settings

• Enable/Disable - Choose to publish/unpublish the module parameter.
• Display Title - Allow to show/hide title of the module.
• Title - Enter the title of the module.
• Target - Allow to display the target link in Same Window/ New Window/ Popup Window
• Theme - Choose theme which displays this module
• Column - Set the number of columns for devices:
  • For devices having screen width from 768px up to greater.
  • For devices having screen width less than or equal 767px.

Source Options



• Media Source - Input “Title, Link, Media, Content, Action”.

Note: Please go to the installation directory to get the image’s source as you want. For example: “C:\xampp\htdocs\magento-2.0\magento\media\wysiwyg\image.jpg”

Effect Option



• Auto Play - Allow to Enable/Disable auto play mode
• Start - Allow to set page that is displayed at first when you run slideshow.
• Step - Set the number of items for each slide transition
• Speed - Allow to set the speed of slide.
• Interval - The duration to change to next slide.
• Stop on Hover - Allow to Stop effects when users hover Or not
• Navigation - Allow to Enable/Disable the next/previous button
• Loop - Allow to Enable/Disable to loop products
• Dot - Allow to Enable/Disable one page scroll with dot navigation style.
• Margin Right - Allow to set right margin of the image
• Nav Speed - Allow to set the speed of Navigation
• Mouse Drag - Allow to use the cursor to navigate pages of products in this module
• Dots Speed - Allow to set the speed of dot navigation style
• Config for Theme 1.
  • Auto Height - Set the value for the height
• Config for Theme 2.
  • Merge - Allow to double the size of an image to the others in this module
  • Type Show For Module - Allow to choose Wide/Boxed for slides

Advanced Options



• Pre-text - The content to show at the top of module
• Post-text - The content to show at the end of module
• Caching - Allow to choose to cache the content of module
• Cache Time - Allow to choose the time (in seconds) before the module is recached

3.3 Page Configuration

To display this module on front page, go to Content >>Elements >> Pages.


Create a new page in Page Management section, go to Content>> Elements>> Pages


• Page Information Tab: Please click to see the Backend Settings.
• Content Tab: Please click to see the Backend Settings.

Copy and paste the following code into the Content field:

{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}

1	{{block class="Sm\ImageSlider\Block\ImageSlider" name="imageslider" template="Sm_ImageSlider::default.phtml"}}

• Design Tab: Please click to see the Backend Settings .