Skip to content
Twilight React Playground
ثيم رائدaren

PhotosSlider

componentBeginnerserverbrowserlive demo

An autoplaying, centered carousel of linked images in wide 1200×300 frames, with pagination dots.

import { PhotosSlider } from '@salla.sa/twilight-theme-engine/components/home';

In plain words

A slideshow of wide pictures, each linking somewhere. It moves by itself, and dots under it show which slide is on screen.

Each item is a picture address and an optional link.

Signature

const PhotosSlider: React.MemoExoticComponent<(props: {
  data: {
    items: { id?: string | number; image?: string; url?: string; link_type?: string }[];
    position?: number;       // 1: part of the slider id
    is_repeated?: boolean;
    [key: string]: unknown;
  };
}) => JSX.Element | null>

Try it live

An autoplaying carousel of linked images in 1200×300 frames. The images here are real product pictures from this store.Try this: set Slides to 1: a single frame, no autoplay to watch. Set it to 0: with no items the block renders nothing.
Storefront canvas · en · LTR

Loading images…

Controls
What a theme writes
import { PhotosSlider } from '@salla.sa/twilight-theme-engine/components/home';

export function Promotions() {
  return (
    <PhotosSlider
      data={{
        position: 1, // part of the slider's element id: keep it unique on the page
        items: [
          { image: 'https://cdn.example.com/summer.jpg', url: '/offers' },
          { image: 'https://cdn.example.com/new.jpg', url: '/latest-products' },
        ],
      }}
    />
  );
}

Example

app/components/home/Promotions.tsx
import { PhotosSlider } from '@salla.sa/twilight-theme-engine/components/home';

const SLIDES = {
  items: [
    { image: 'https://cdn.example.com/summer.webp', url: '/offers' },
    { image: 'https://cdn.example.com/new-in.webp', url: '/latest-products' },
  ],
};

export function Promotions() {
  return <PhotosSlider data={SLIDES} />;
}

How it behaves

  • SallaSlider with type="carousel", centered, autoPlay and pagination, id photos-<position>-slider. Each slide is an engine Link (to # without url) around the engine Image, object-contain, in a 1200/300 aspect-ratio box; the first image loads eagerly.

  • is_repeated does nothing inside the component; the renderer adds repeated-block to the wrapper class.

  • With no items it renders null.

Gotchas

  • image is a plain URL string here, while SquarePhotos expects image: { url, alt }. The two blocks look alike and take different shapes.

  • The alt text is generated (image-slider-0, image-slider-1…), not taken from the data: these images have no meaningful description for screen readers.

Related

SquarePhotos

Square picture tiles that link somewhere, with optional text over each: one row up to three tiles, a three-column grid beyond.

FixedBanner

A single linked banner image, with a smaller image for phones and an eager-loading option for a banner at the top.

Source and docs