Products Slider Widget
Content
Content
Product Template: Choose between Default and Custom templates.
Default Product template provides the following settings:
Products: Set the amount of posts that should be shown.
Slider Type: Choose between Carousel and Coverflow.
Carousel is the standard rotating carousel skin that shows a customized number of image or video slides per view. This type allows you to choose a Slider Effect between Cube, Fade, Slide and Flip.
Coverflow is a slider skin that shows a central slide in the front and two side slides in the back.
Slider Direction: Choose between Horizontal and Vertical slider direction.
Slider Height: Choose between Auto and Custom slider height.
Slides Per View: Set the amount of Slides to be shown per row for desktop, tablet and mobile.
Slides to Scroll: Set the amount of Slides to be scrolled per swipe.
Custom Product template allows you to choose the desired Entry template to be displayed. All other options are the same as the Default Product template.
Query
Source: Choose a source between Latest Products, Sale, Featured, Manual Selection, Current Query and Custom Arguments.
You can Include or Exclude products.
Include option settings
Terms: Add needed terms (taxonomies) to show corresponding products.
Order By: Choose the order parameter from the dropdown and set Ascending or Descending order.
Exclude option settings
Terms: Add needed terms (taxonomies) to show corresponding products.
Manual Selection: Search & Select entries to exclude from query.
Order By: Choose the order parameter from the dropdown and set Ascending or Descending order.
Slider Options
Autoplay: Slide to YES to enable Autoplay.
Autoplay Speed: Set desired Autoplay speed here.
Animation Speed: Set how fast slides should slide. (in milliseconds)
Active Slide: Choose the slide that should be shown first.
Pause on Hover: Slide to YES to enable Pause on Hover.
Autoplay Reverse: Slide to YES to enable Autoplay reverse.
Infinite Loop: Slide to YES to enable Infinite Loop.
Mousewheel Control: Slide to YES to slide slides with a Mouse wheel.
Free Positioning: Slide to Yes to enable free slides positioning. When this mode is enabled slides don’t have fixed positions, like usual scroller.
Content Animation: Choose the Animation from the dropdown.
Navigation: Choose slides’ Navigation between None, Bullets, Progressbar and Fraction.
When Bullets Navigation is chosen you can select its type between Normal, Dynamic and Numbered.
Show Arrows: Slide to YES to show Arrows and set them.
Style
Slider Layout
Space Between: Set the space between slides for desktop, tablet and mobile.
Width: Set the slider width for desktop, tablet and mobile.
Padding: Set paddings for desktop, tablet and mobile.
Separators: Choose a separator type from the dropdown and set it
Products
Image
Border Type: Choose a Border Type from the dropdown and set it.
Border Radius: Set a border radius to products for desktop, tablet and mobile.
Spacing: Set a spacing between image and title for desktop, tablet and mobile.
Title
Color: Choose the Title color for Normal and Hover modes.
Typography: Set a Typography using settings from the dropdown.
Spacing: Set a spacing between title and below content for desktop, tablet and mobile.
Rating
Star Color: Choose a Star color.
Empty Star Color: Choose an Empty Star color.
Star Size: Set a Star size here.
Spacing: Set a spacing between Rating and Price.
Sale Price
Color: Choose a Sale Price color.
Typography: Set a Typography using settings from the dropdown.
Regular Price
Color: Choose a Regular Price color.
Typography: Set a Typography using settings from the dropdown.
Button
Show Button: Slide to YES to show the button.
Typography: Set a Typography using settings from the dropdown.
Background Type: Choose between Color and Gradient background type.
Background Color: Choose Background color for Normal and Hover modes.
Text Color: Choose a Text color for Normal and Hover modes.
Border Color: Choose a Border color for Normal and Hover modes.
Text Decoration: Choose the desired decoration from the dropdown.
Border Type: Choose a Border Type from the dropdown.
Border Radius: Set Image border radius for desktop, tablet and mobile.
Text Padding: Set a Text padding here.
Spacing: Set a spacing between Button and other content.
View Cart
Color: Choose a View Cart color.
Typography: Set a Typography using settings from the dropdown.
Product Box
Box Shadow: Choose desired settings from the dropdown (for Normal and Hover modes).
Background Color: Choose Background color for Normal and Hover modes.
Border Color: Choose a Border color for Normal and Hover modes.
Alignment: Choose between Left, Center and Right alignment for desktop, tablet and mobile.
Border Width: Set a Box Border width here.
Border Radius: Set a Box border radius for desktop, tablet and mobile.
Padding: Set paddings for desktop, tablet and mobile.
Sale Label
Slide to SHOW to enable Sale Label.
Text Color: Choose a Text color.
Background Color: Choose Background color.
Typography: Set a Typography using settings from the dropdown.
Border Radius: Set a Label border radius.
Width: Set desired Label width.
Height: Set desired Label height.
Position: Choose between Left and Right label position.
Distance: Set a distance from the border.
Slider Arrows
Slider Arrows
Icon Color: Choose Icon Color from a color palette or dynamic tags. (for Normal and Hover modes)
Background Color: Choose Icon Background Color from a color palette or dynamic tags. (for Normal and Hover modes)
Box Shadow: Choose desired settings from the dropdown. (for Normal and Hover modes)
Icon Size: Set Icon size for desktop, tablet and mobile.
Arrows Box Width: Set Arrows Box Width for desktop, tablet and mobile.
Arrows Box Height: Set Arrows Box Height for desktop, tablet and mobile.
Border Radius: Set Arrows Box border radius for desktop, tablet and mobile.
Border Type: Choose a Border Type from the dropdown and set it.
Padding: Set padding for desktop, tablet and mobile.
Container
Position: Choose between Horizontal and Vertical positions.
Horizontal alignment: Choose horizontal alignment between Start, Center, End and Space between for desktop, tablet and mobile.
Vertical alignment: Choose vertical alignment between Top, Center and Bottom for desktop, tablet and mobile.
Margin: Set margins for desktop, tablet and mobile.
Advanced
Set the Advanced options that are applicable to this widget