The Sly Slider CS-Cart add-on adds an attractive horizontal slider with category, products, brands, new products with different settings on the page in an online shop.
The add-on is currently compatible with CS-Cart v.4.2.x - 4.10.x.
The main differences with the standard CS-Cart slider are:
- the administrator can make the slider with categories. You can't do it without this additional module;
- it's possible to run the content of the slider (add/ hide price, title, image, Add to Cart button);
- it adds eye-catching effects to the ordinary process of slide changing;
- the admin can assign specific colors to control elements (arrows, scrollbar, circles) due to the store theme style;
- the slider is fully adaptive and it's very convenient for all mobile users.
The carousel allows to draw customers attention to the concrete area of the page and improve behavioral factors in the store.
Not only images are contained in the Sly Slider, but text too. You can show product pictures, titles and prices in the carousel on the main page or any other page of the eCommerce website. This feature gives more information about products and motivates customers to move to the concrete product page from the home page.
Settings made by Administrator can effect on dragging, scrolling, and scrollbar. The administrator can even set the global styles of design. Read more about settings in the documentation tab.
The features:
- The module has the responsive design.
- It works correctly with 4 versions of CS-Cart and MultiVendor.
- The add-on shows perfectly on all modern versions of browsers.
UPDATE, September 2018.
Ability to add the new block Sly Banners
Ability to add View all button
Some additional settings
If you have any questions, do not hesitate to contact us.
Please, remember that this module can be changed easily to meet your demands.
When you go to Sly Slider add-on's settings, you see the scheme of the future slider:
- FRAME
- SLIDEE
- CONTENT/ITEMS
Let's assume the settings:
Dragging
- Mouse Dragging - Enable navigation by dragging the SLIDEE with a mouse cursor.
- Touch Dragging - Enable navigation by dragging the SLIDEE with touch event.
- Release Swing - Easy out on dragging swing release.
- Elastic Bounds - Stretch SLIDEE position limits when dragging past FRAME boundaries.
- Swing speed - Swing synchronization speed: where,1 = instant, 0 = infinite.
Scrolling
- Scroll by - Pixels or items to move per one mouse scroll. 0 to disable scrolling.
- Scroll hijack - Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
- Scroll trap - Don’t bubble scrolling when hitting scrolling limits.
Global Styles
- Apply it? - All styles settings for all SLY sliders will be applied to these color settings.
- Arrow’s color - enter a hex number color
- Radio button’s color - enter the hex number color
- Scroller area color - enter the hex number color
ScrollBar
- Drag Handle - Whether the scrollbar handle should be draggable.
- Dynamic Handle - Scrollbar handle represents the ratio between hidden and visible content.
- Min Handle Size - Minimal height or width (depends on sly direction) of a handle in pixels.
- ClickBar - Enable navigation by clicking on a scrollbar.
- Sync Speed - Handle=> SLIDEE synchronization speed, where:1 = instant, 0 = infinite.
How to add Sly Slider on the homepage?
To make different settings to different sliders on the home page, go to Design-> Layouts-> Homepage.
- Add block
- Create a new block
- In the General tab enter the name and choose the template - ShopyOne Sly Brands Scroller.
The template ShopyOne Sly Brands Scroller adds new settings to a carousel.
- Show name - tick this field to show the title under the image on the carousel
- Show image - tick this field to show the image instead of a blank place for image
- Indent between items (px) - the distance between images in the carousel
- Show price - tick this field to show prices under the title
- Image width - dimension of the picture in the slider. Enter the number of px
- Show slider’s arrows - there are arrows on the ends of the slider (on left and on right sides)
- Cycling - tick the field to make slider show content/items round by round
- Cycling time - enter the figure, how much time takes to start a new round of the carousel
- Pause on hover - tick the field if you want to stop cycling when the mouse cursor is on the slider area
- Move by - this setting shows the step that slider should move by
- Speed - define the speed of the slider
UPDATE 2018
1. New block Sly Banners.
It allows adding banners to content items. Banners have links to any pages, you have assigned to the banner in the settings.
2. New custom CSS has been added. It adds the additional background for the slider that looks more interesting. The ability to change the color of the slider background is on settings.
3. The ability to add View All button has been placed. You can assign any link you want to this button.
Cart is empty
