Swiper is most modern mobile touch slider, the swiper module for prestashop is a built-in module of Transformer theme v4 and Panda template v2. This tutorial is for users of Transformer theme v4 and Panda template v2.
Main features of Swiper Module For Prestashop
- 4 predefined sliders(Fullwidth slider, Boxed slider, Slider with banners and Multiple slides per view).
- Modern mobile touch slider.
- Support RTL very well.
- 3 different navigation controls.
- Images Lazy Loading.
- 4 different paginationnes.
- Support progress bar.
- Centered slides.
- Space Between Slides.
- Auto Slides Per View / Carousel Mode.
- Loop Mode / Infinite Loop.
- Autoplay.
- 5 transition styles(Slide, Fade, Cube, Flip and Coverflow).
General usages - Swiper Module For Prestashop
- Display sliders on all available hooks.
- Display sliders on the top of these page: Prices Drop, New Products, Manufacturer, Supplier, Best selling, Cms.
- Display different the same slider for all categries.
- Display different the same slider for all products.
- Display different sliders to different categories.
- Display different sliders to different manufacturers.
- Width its short code feature it can be place to where ever you want, like in the middle of a blog post, in the middle of a product's description.
- It's compatible with Visual composer for prestashop module, blocks created by Swiper can be used by the Visual composer fore presatshop module.
How 4 predefined templates look like
Template 0 - Fullwidth slider Live example: http://panda2.sunnytoo.com/en/ (The main slider).
Template 1 - Boxed slider Live example: http://panda2.sunnytoo.com/seventh/en/ (The main slider).
Template 2 - Slider with banners Live example: http://panda2.sunnytoo.com/eighth/en/ (The main slider).
Template 3 - Multiple slides per view Live example: http://panda2.sunnytoo.com/fourth/en/ (The full screen slider which is near the footer).
How to display create a slider with banners.
- Select this predefined template And then save.
- Click on the View button of the slider you just created. You will be able to add slides and banners on the next page.
- You can add as many banners as you want.
- You can adjust the proportion of slider block and banner block, you can also adjust the gap between banner block and banner block.
With these two options, you can have a lot possibilities. Check this demo swiper slider with small gaps. Let see some other examples.
How to display sliders on the top of new products page.
- Set the "Show on" option to "Full width top".
- Check the "New Products" in the "Display on" setting.
By choosing a different page on the 2nd step you can achieve these:
- Display swiper sliders to the top these pages: Prices Drop, Manufacturer, Supplier, Best selling.
- Display the same swiper slider to the top of all category pages.
- Display the same swiper slider to the top of all CMS pages.
- Display the same swiper slider to the top of all product pages.
What's the "Height or min height(optional)" setting.
It's an interesting setting. By default, the height of slider depends on dimensions of images you upload. The "Height or min height" option allows you to set slider height, it's not only set slider height, but also affect things below.
- Images you uploaded would be used as background images.
- The height of this slider would not decrease on small screen devices. Images will be kind like cropped on small screen devices, some parts of your images may not be visible.
- Images will be kind like cropped on small screen devices, some parts of your images may not be visible.
- "Transition style" setting would not take work for this slider.
- This slider will work in a different way comparing with other slider modules, you may like the way.
- You do not have to pay much attention to the dimensions of images.
Check the main slider of the second demo of panda template on both your desktop and mobile to see how it works on them.
How to display sliders different sliders to different categories.
- Select a category from the "Show on".
- The "Show on subcategories" is used to control where the slider will be shown on subcategories of the category you just selected.
- Don't check the "Category" option in the "Display on" setting.
What the template 3 (Multiple slides per view) can do?
It can be used to display several slides per view.
- If your slides are in the same size, then you can decide to display how many slides on different devices by using the "How many sliders per view" setting.
- If your slides have different widths, then the "Auto" would be perfect for you.
- With the "Centered slides" option, you can get a nice slider, the active slide will be centered, not always on the left side.
There are 4 different navigates, how do they look like?
5 transition styles
Slide, Fade, Cube, Flip and Coverflow
Cube: demo
Flip: demo
Coverflow: demo
Live demo of Coverflow Panda template demo 8
Why sliders start playing automatically, after I enable the "Progress bar" setting?
That's how the "Progress bar" setting supposed to do, only autoplay sliders can have progress bar.
An important thing you need to know when you add texts/Captions on slides?
You can find in a url to the "Link" field to make whole slide become clickable, after doing that, don't add any links and buttons to the Caption field. Because a link can't be nested into another link. Don't worry to much about that, because the module checks if it finds two links, then the url in "Link" field will be ignored.
What's the "Caption animation" setting.
Texts/Captions can have animations, that's what the "Owl carousel module for prestashop" can't do. Here are some demos Panda template demo 1, Transformer theme demo 9.
You can check how those animations look like here Animate.css
Note the setting can't work for the predefined template 3.