Skip to main content
The product slider component displays a carousel of products with automatic sliding and navigation controls.

​
Component usage

Add a product slider to your home page: 
<section id="best-offers-{{ position }}-slider" 
  class="s-block s-block--best-offers container overflow-hidden">
  <salla-products-slider
    source="{{ products.source }}"
    limit="{{ limit }}"
    autoplay
    source-value="{{ products.source_value|json_encode }}"
    display-all-url="{{ display_all_url }}"
    block-title="{{ title }}"
    block-subTitle="{{ sub_title|raw }}"
    slider-id="slider-with-bg-{{ position }}"
  ></salla-products-slider>
</section>

​
Variables

​
products.source
string
required
Source type for products: latest, most_sales, chosen_products, category, brand
​
products.source_value
array
Array of IDs when source is chosen_products, category, or brand. For example: [123, 456, 789]
​
title
string
Main heading displayed above the slider
​
sub_title
string
Subtitle or description text below the main title
​
display_all_url
string
URL for the “View All” button. If empty, the button is hidden
​
limit
integer
Maximum number of products to display in the slider
​
position
integer
Sorting position of the component on the page (starts from zero)

​
Component attributes

​
source
string
Product source type passed from variables
​
limit
integer
Product count limit
​
autoplay
boolean
Enables automatic sliding of products
​
source-value
json
JSON-encoded array of source IDs
​
display-all-url
string
Link to view all products page
​
block-title
string
Section heading text
​
block-subTitle
string
Section subtitle text (supports HTML)
​
slider-id
string
Unique identifier for the slider instance

​
Example with latest products

<salla-products-slider
  source="latest"
  limit="8"
  autoplay
  block-title="Latest Products"
  block-subTitle="Check out our newest arrivals"
  slider-id="latest-products-slider"
></salla-products-slider>

​
Example with specific category

<salla-products-slider
  source="category"
  source-value="[123]"
  limit="12"
  autoplay
  display-all-url="/category/electronics"
  block-title="Electronics"
  slider-id="electronics-slider"
></salla-products-slider>

​
Example with chosen products

<salla-products-slider
  source="chosen_products"
  source-value="[101, 102, 103, 104, 105]"
  limit="5"
  autoplay
  block-title="Featured Selection"
  slider-id="featured-slider"
></salla-products-slider>
The slider automatically adjusts the number of visible products based on screen size for optimal mobile viewing.

​
Configuration in twilight.json

This component is registered in twilight.json under features: 
{
  "features": [
    "component-products-slider"
  ]
}

Build docs developers (and LLMs) love

Get started for freeTalk to us