Image Slider - marketplace.magento.com · E: [email protected] 3. Fill in the Slider...
12
Transcript of Image Slider - marketplace.magento.com · E: [email protected] 3. Fill in the Slider...
Installation
1. Copy contents of the extension to your Magento app/code folder. Once completed, the folder
structure should be “app/code/Absolute/AdvancedSlider”.
2. In the command line (in the magento root directory), run bin/magento setup:upgrade to
enable and install the module.
3.
4.
‘Content’ and ‘Slider’.
Creating a Slider
1. Navigate to ‘Content’ in sidebar, then click ‘Slider’.
2. Click the ‘Add new Slider’ button.
3. Fill in the Slider Form
a. Store View - The store view you want this slider to be visible on.
b. Name - The name of the slider.
c. Alias - The alias of the slider (used for displaying the slider).
d. Slide Delay - The delay between slider transition in milliseconds (i.e. 1000 = 1
second). Leave blank for the default value (3000)
e. Auto Play - Yes/No - If enabled, the slider will automatically transition between
slides based on slide delay value.
f. Show Arrows - Yes/No - If selected, navigation arrows will be displayed to navigate
between slides.
g. Pagination - Yes/No - If active this will default to dots unless ‘Pagination’ content is
supplied in the slides.
h. Transition - Slide/Fade - This will change the transition effect between slides.
i. Max container width (pixels) - Default = 1920 - Size used to generate responsive
desktop images
j. Max mobile container width (pixels) - Default = 768 - Size used to generate
responsive mobile images
5a. Click ‘Add New Slide’.
5b. Fill in the Slide form (see slide options for more details).
5c. Click ‘Save Slide’.
5d. Repeat until all your slides are added.
6. You can now display your slider on the website (see slide options for more details).
Displaying the Slider
Widget Method
1. Add the slide to your CMS page.
2. Click Insert Widget
a. Select ‘Absolute Slider’ from the ‘Widget Type’ dropdown menu.
b. Select the slider you require from the dropdown list.
c. Click ‘Insert Widget’.
3. Click ‘Save Page’.
4. Your slider should now be visible on your website.
Layout XML Method
1. Insert the following block class into the relevant layout XML in your theme.
<block class=”Absolute\AdvancedSlider\Block\Slider” name=”slider” template=”slider.phtml”>
<arguments>
<argument name=”slider_alias” xsi:type=”string”>my-homepage-slider</argument>
</arguments>
</block>
Where the value of slider_alias is the alias of the slider you created.
2. Clean the cache and refresh the web page.
Template (PHTML) Method
1. In the template where you want to output the slider, add the following line of PHP.
<?php echo $this->getLayout()->createBlock(
“\Absolute\AdvancedSlider\Block\Slider”,
‘slider’,
[‘data’ =>
[‘slider_alias’ => ‘my-homepage-slider]
]
)->toHtml(); ?>
Where the value of slider_alias is the alias of the slider you created.
2. Clean the cache and refresh the web page.
Slide Options
1. Store View - The store view to display this slide
2. Title - The title of the slide (reference only)
3. Image - The image that will be displayed on desktop resolutions
4. Mobile Image - The image that will be displayed mobile resolutions
5. Image Position
a. Full (right example shows full with content)
5b. Left (best used with content)
5c. Right (best used with content)
6. Content - Displays in the center of the slider, or opposite the image if ‘Image Position’ Left or
Right is selected.
7.
browser color names.
8. Slide Background Colour - The background colour of the slide (if the position value is set to left
or right). This will accept any CSS colour code including Hexadecimal, RGB, RGBA, HSL, HSLA
9. Order - The order the slides will be shown in (leave blank to display in the order they are
created).
10. Link - The slide will link to the provided URL.
11.
slide will be shown immediately.
12.
13.
any slide within a slider this will activate pagination buttons, please make sure if used this is added
to all slides to display correctly. Pagination must be set to ‘True’ on the overall slider settings for
this to be displayed.
