Kategorie

Swiper Slider

Swiper, as authors say is the most modern mobile touch slider, what makes it the best available slider for modern online stores. As statistics show it's used by almost 20,000 of users! It's lightweight slider, because it doesn't use any JavaScript libraries like jQuery. Swiper slider widget for GrandNode is the best possibility to increase the functionality of your store.

Global settings:
showNavigation - decide if you want to show navigation arrows
showPagination - decide if you want to show pagination dots
paginationType - change the type of pagintation - "bullets", "fraction", "progressbar" or "custom"
autoPlay - decide if you want to play slider automatically
setMinHeight - set the minimum height of slider
speed - specify the speed of slide change
loop - decide if you want to enable continuous loop mode
lazyLoading - decide if you want to lazy load images in slider
preLoadImages - When enabled Swiper will force to load all images
WidgetZone - select widget zone where Swiper should appear
WidgetZoneOwn - select your own widget zone where Swiper should appear
categoryWidgetZoneOwn - select your own widget zone on category pages where Swiper should appear
manufacturerWidgetZoneOwn - select your own widget zone on manufacturer pages where Swiper should appear
scrollbar - decide if you want to show scrollbar
slidesPerView - choose the number of slides per view
spaceBetween - specify the margin between slides

Slide configuration:

Each slide is divided into three parts - HeaderBodyFooter. You can add different text or buttons to 

Caption - Specify the position of sliders text. 
Header - Enter the header text
Body - Enter the body text
- Footer - Enter the footer text
- SlideOrder - Specify the slide order
HeaderAnimation - Choose the header animation
HeaderAnimationDelay - specify the delay in animation
BodyAnimation - Choose the body animation
BodyAnimationDelay - Specify the delay in animation
FooterAnimation - Choose the footer animation
FooterAnimationDelay - Specify the delay in animation
Breakpoints - Create responsive sliders
Visibility - Specify if slide should be published or not

Plugin supports multi store and multi language configuration, so it's perfect for each kind of online store also in multi tenant GrandNode stores.

How to use Breakpoints in Swiper Slider?

One of the most important features of Swiper slider is fact that it is fully responsive. You can use advanced setting - Breakpoints and configure it on your own.

To achieve that, go to Admin panel, Configuration, then Widgets section and click the Configuration button, Advance settings tab is your desired destination.

You can configure 5 breakpoints. Configure it according to below listed details:

- Extra small means width smaller or equal to 320px

- Small means width smaller or equal to 576px

- Medium means width smaller or equal to 768px

- Large means width smaller or equal to 992px

- Extra large means width smaller or equal to 1200px

- Default number of slides, configured on Options tab will be used in resolutions higher than 1200px.

back to top