Skip to main content
The photos slider component displays a carousel of images with automatic rotation, pagination dots, and centered display.

​
Component usage

Add an image slider to your home page: 
<section class="s-block s-block--photos-slider {{ is_repeated ? 'repeated-block' : '' }}">
  <salla-slider 
    type="carousel" 
    class="home-slider photos-slider"
    centered 
    auto-play 
    pagination
    id="photos-{{ position }}-slider"> 
    <div slot="items">
      {% for index, item in items %}
        <div class="swiper-slide">
          <a href="{{ item.url }}">
            <img 
              loading="eager" 
              src="{{ item.image.url }}" 
              class="w-full object-contain rounded-md" 
              height="300" 
              width="1200" 
              alt="{{ store.name }} image-slider-{{ index }}"
            />
          </a>
        </div>
      {% endfor %}
    </div>
  </salla-slider>
</section>

​
Variables

​
items
array
required
Array of slide objects containing image and link information
​
items[].url
string
Destination URL when the slide image is clicked
​
items[].link_type
string
Type of link:
  • category - Link to a category page
  • product - Link to a product page
  • offers - Link to offers page
  • page - Link to a custom page
  • external_link - Link to external URL
  • brand - Link to a brand page
​
items[].image.url
string
required
URL of the slide image
​
items[].image.alt
string
Alternative text for the image (for accessibility)
​
position
integer
Sorting number for component placement (starts from zero)
​
is_repeated
boolean
When true, adds the repeated-block class for styling multiple slider instances

​
Example

<section class="s-block s-block--photos-slider">
  <salla-slider 
    type="carousel" 
    class="home-slider photos-slider"
    centered 
    auto-play 
    pagination
    id="photos-0-slider"> 
    <div slot="items">
      <div class="swiper-slide">
        <a href="/category/electronics">
          <img 
            loading="eager" 
            src="https://cdn.example.com/slide1.jpg" 
            class="w-full object-contain rounded-md" 
            height="300" 
            width="1200" 
            alt="Electronics banner"
          />
        </a>
      </div>
      <div class="swiper-slide">
        <a href="/category/fashion">
          <img 
            loading="eager" 
            src="https://cdn.example.com/slide2.jpg" 
            class="w-full object-contain rounded-md" 
            height="300" 
            width="1200" 
            alt="Fashion banner"
          />
        </a>
      </div>
    </div>
  </salla-slider>
</section>

​
Slider attributes

​
type
string
Slider type - use carousel for image sliders
​
centered
boolean
Centers the active slide
​
auto-play
boolean
Enables automatic slide rotation
​
pagination
boolean
Shows pagination dots at the bottom
​
id
string
Unique identifier for the slider instance
  • Width: 1200 pixels
  • Height: 300 pixels
  • Format: JPG or WebP for best performance
Images are displayed with object-contain to ensure the full image is visible without cropping. Use consistent image dimensions across all slides for best results.

​
Configuration in twilight.json

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

Build docs developers (and LLMs) love

Get started for freeTalk to us