CS-Cart "Pro Slider" add-on adds very eye-catching sliders of banners. The module makes your online store elegant and stylish.
The main features of Pro Slider module for CS-Cart:
- Any screen adaptation. It's responsive, has breakpoints and touch-swipe.
- Smooth animations and fade effect.
- Multiple layout options: customizable orientation, auto-height, infinite scrolling and etc.
- High-Speed of Slide loading. It has optimized image loading and lazy-load option.
- Different navigation possibilities: keyboard navigation, arrows, thumbnails + quality linking system.
Compare the variants of sliders that you can have on your store after purchasing the "Pro Slider" add-on.
Variant 1. Vertical Slideshow
Highlighted features: breakpoints, mixed thumbnail content, vertical slides, slides loop disabled, responsiveness, touch-enabled, captions.
The highlighted feature in this example is the use of 'breakpoints' to change the slider's configuration based on the window width. If the width decreases, the thumbnails change their position to the bottom of the slides, and if the width becomes even smaller, the content of the thumbnails is changed to simple text instead of both images and text.
Also, the slides are oriented vertically and the 'loop' feature is disabled.
Variant 2. Horizontal Slideshow
Highlighted features: responsive, touch-swipe, slides loop, text thumbnails, animated layers, JavaScript breakpoints.
When you click on the thumbnails or arrows you will notice the slide transitioning only after the layers fade out. This feature is optional and the slides can transition immediately, as it happens when you swipe the slides.
Another important feature to mention is that the layers in this example won't be scaled down automatically (which would also be possible). Instead, CSS media queries are used to hide certain layers on smaller screens. This produces a better user experience when the slider is viewed on a small screen. However, it's also possible to scale the layers automatically.
The thumbnails will also become smaller and hide a portion of the text on a small screen. This is achieved using the Breakpoints feature.
Variant 3. Horizontal Slideshow (full-width banner)
Highlighted features: conditional images, image thumbnails, fade effect, auto-scale layers, responsiveness, touch-enabled.
The most important feature showcased in this example is the possibility to specify different image sources for different slider sizes. For example, if the slider goes in full-screen mode, the images will change to a higher resolution version. Also, if you open the slider on a mobile device, another set of images (with lower resolution and lower file size) will load.
Other showcased features are the automatic scaling of the layers when the slider becomes smaller and the use of a fade transition instead of the default slide transition.
More information about settings of the module you can find in the tab Documentation.
Compatibility:
- The add-on "Pro Slider" works perfectly with CS-Cart 4 versions.
- It is fully responsive and compatible with all modern versions of browsers: Internet Explorer, Mozilla Firefox, Safari, Google Chrome, and Opera.
NOTE:
- After the payment is confirmed, you will be able to download the module's files from the order details page.
- Remember that we can make any changes in this add-on due to your demands. Please, feel free to contact us if you have any questions about this add-on.
- Installation service is free for default CS-Cart with no changes in core files.
As the add-on is installed on your CS-Cart store, you may check the add-on's settings.
Go to Add-on -> Manage Add-ons
General Add-on's settings.
Aspect Ration - Sets the aspect ratio of the slides. If set to a value different than -1, the height of the slides will be overridden in order to maintain the specified aspect ratio.
Keyboard - Indicates whether keyboard navigation will be enabled. Tick this field if you want your customers to have the ability to change banners with the help of a keyboard.
Keyboard Only on focus - Indicates whether the slider will respond to keyboard input only when the slider is in focus.
Touch Swipe - Indicates whether the touch swipe will be enabled for slides.
Touch Swipe Threshold - Sets the minimum amount that the slides should move.
Small Size - If the slider size is below this size, the small version of the images will be used.
Medium Size - If the slider size is below this size, the medium version of the images will be used.
Large Size - If the slider size is below this size, the large version of the images will be used.
Update Hash - Indicates whether the hash will be updated when a new slide is selected.
Thumbnail Pointer - Indicates if a pointer will be displayed for the selected thumbnail
Thumbnail Touch Swipe - Indicates whether the touch swipe will be enabled for thumbnails
Wait For Layers - Indicates whether the slider will wait for the layers to disappear before going to a new slide.
Auto Scale Layers - Indicates whether the layers will be scaled automatically.
Auto Scale Reference - Indicates whether the layers will be scaled automatically.
Fade Full Screen - Indicates whether the button will fade in only on hover.
When all general settings are specified, you may set the special settings for each Pro Slider on your CS-Cart store.
Go to Design -> Layouts -> Add block. Choose the appropriate variant of Pro Slider (4 variants of Pro Slider are available):
- Pro Slider Dynamic
- Pro Slider Full Width
- Pro Slider with bottom thumbnails
- Pro Slider with thumbnails
When the block with Pro Slider is chosen, open its settings.
Width - Can be set to a fixed value, like 900 (indicating 900 pixels), or to a percentage value, like '100'.
Height - Sets the height of the slide. The same rules available for the 'width' property also apply for the 'height' property. It's important to note that percentage values need to be specified inside quotes. For fixed values, the quotes are not necessary. Also, please note that, in order to make the slider responsive, it's not necessary to use percentage values.
Start Slide - indicate the first slide in a carousel, when the slider loads
Shuffle - Indicates if the slides will be shuffled.
Loop - Indicates if the slider will be loopable (infinite scrolling).
Orientation - Indicates whether the slides will be arranged horizontally or vertically.
Responsive - Tick the field to make the slider responsive. The slider can be responsive even if the 'width' and/or 'height' properties are set to fixed values. In this situation, 'width' and 'height' will act as the maximum width and height of the slides.
Autoplay - Indicates whether or not autoplay will be enabled.
Autoplay Delay - Sets the delay/interval (in milliseconds) at which the autoplay will run.
Autoplay Direction - Indicates whether autoplay will navigate to the next slide or previous slide.
Available values:'normal' and 'backwards'
Autoplay on Hover - Indicates if the autoplay will be paused or stopped when the slider is hovered.
Available values: 'pause', 'stop' and 'none'
Arrows - Indicates whether the arrow buttons will be created.
Fade Arrows - Indicates whether the arrows will fade in only on hover.
Buttons - Indicates whether the buttons will be created.
Full screen - display the slider on a full screen.
Show Thumbnail Icon - tick the field to show small images of the slides in the slider area.
Show Thumbnails Text - tick the field to show the text for each slide in the slider area.
Show Captions - tick the field to show the titles or captions for each slide in the slider area.
Thumbnail Width - indicate the width of a thumbnail in pixels.
Thumbnail Height - indicate the height of a thumbnail in pixels.
Thumbnails Position - set the position of thumbnails in the slider. You may choose: bottom, top, right, left.
Thumbnail Arrows - tick the field to show arrows on thumbnails.
Fade Thumbnail Arrows - tick the field if you want to add fade effect to arrows.
Center Image - Indicates if the image will be centered
Image Scale Mode - Sets the scale mode of the main slide images (images added as background). 'cover' will scale and crop the image so that it fills the entire slide. 'contain' will keep the entire image visible inside the slide. 'exact' will match the size of the image to the size of the slide. 'none' will leave the image to its original size.
Available values:'cover', 'contain', 'exact' and 'none'
Allow Scale Up - Indicates if the image can be scaled up more than its original size
Auto Height - Indicates if height of the slider will be adjusted to the height of the selected slide.
Auto Slide Height - Will maintain all the slides at the same height, but will allow the width of the slides to be variable if the orientation of the slides is horizontal and vice-versa if the orientation is vertical.
Force Size - Indicates if the size of the slider will be forced to full width or full window.
Note: It's possible to make the slider full width or full window by giving it a width and/or height of '100%'. However, sometimes the slider might be inside other containers which are less than full width/window. The 'forceSize' property is useful in those situations because it will still enlarge the slider to fill the width or window by overflowing its parent elements.
Default value:'none'
Available value:'fullWidth', 'fullWindow' and 'none'.
Slide Distance - Sets the distance between the slides.
Slide Animation Duration - Sets the duration of the slide animation.
Height Animation Duration -
Center Selected Slide - Indicates whether the selected slide will be in the center of the slider, when there are more slides visible at a time. If set to false, the selected slide will be in the left side of the slider.
Right to Left - Indicates if the direction of the slider will be from right to left, instead of the default left to right.
Fade - Indicates if fade will be used.
FadeOut Previous Slide - Indicates if the previous slide will be faded out (in addition to the next slide being faded in).
Fade Duration - Sets the duration of the fade effect.
Fade Caption - Indicates whether or not the captions will be faded.
Caption Fade Duration - Sets the duration of the fade animation.
Visible Size - Sets the size of the visible area, allowing for more slides to become visible near the selected slide.
Breakpoints - Sets specific breakpoints which allow changing the look and behavior of the slider when the page resizes.
The 'breakpoints' property is assigned an object which contains certain browser window widths and the slider properties that are applied to those specific widths. This is very similar to CSS media queries. However, please note that these custom properties will not be inherited between different breakpoints. The slider's properties will reset to the original values before applying a new set of properties, so if you want a certain property value to persist, you need to set it for each breakpoint.
Cart is empty
