salla-slider

Swiper-based slider for banners, product carousels, testimonials and product image galleries with thumbnails. Use it whenever a theme needs a swipeable list of items. Put the slides as children of one <div slot="items">; each child becomes a slide. For type="thumbs", add the thumbnails as children of a <div slot="thumbs">. Important: the arrows and the pagination find their elements through the host id, so set an id on salla-slider if you use show-controls or pagination. Set static-when-single to skip the slider when there is only one slide.

Accessibility: the arrow buttons are real button elements with aria-labels ("Previous Slide" and "Next Slide"), and pagination bullets are clickable.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-slider> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

This component has a native React version. Use it instead of the raw tag:

import { SallaSlider } from '@salla.sa/twilight-components-react';

Try itCopy Anchor Link

ExampleCopy Anchor Link

import { SallaSlider } from '@salla.sa/twilight-components-react';

export function Example() {
  return (
    <SallaSlider id="home-slider" type="carousel" blockTitle="New arrivals" displayAllUrl="/products" pagination>
      <div slot="items">
        <div style={{ width: '240px' }}>Slide 1</div>
        <div style={{ width: '240px' }}>Slide 2</div>
        <div style={{ width: '240px' }}>Slide 3</div>
      </div>
    </SallaSlider>
  );
}

import { SallaSlider } from '@salla.sa/twilight-components-react';

export function Example() {
  return (
    <SallaSlider id="product-gallery" type="thumbs" showThumbsControls={false}>
      <div slot="items"><img src="/img/1.jpg" alt="" /><img src="/img/2.jpg" alt="" /></div>
      <div slot="thumbs"><img src="/img/1-thumb.jpg" alt="" /><img src="/img/2-thumb.jpg" alt="" /></div>
    </SallaSlider>
  );
}

PropertiesCopy Anchor Link

sliderConfig exampleCopy Anchor Link

let slider = document.querySelector('salla-slider');
slider.sliderConfig = {
  slidesPerView: 1,
  spaceBetween: 30,
}

thumbsConfig exampleCopy Anchor Link

let slider = document.querySelector('salla-slider');
slider.thumbsConfig = {
  slidesPerView: 3,
  spaceBetween: 10,
}

EventsCopy Anchor Link

Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).

MethodsCopy Anchor Link

Call these on the element or a React ref.

getSlides() => Promise<any>Copy Anchor Link

Returns the slide elements of the main slider.

Returns Promise<any>: A Promise that resolves to the Swiper slides array, or undefined before the slider has initialized.

getThumbsSlides() => Promise<any>Copy Anchor Link

Returns the slide elements of the thumbs slider.

Returns Promise<any>: A Promise that resolves to the thumbs Swiper slides array, or undefined if there is no thumbs slider.

getThumbsUpdateSize() => Promise<any>Copy Anchor Link

Recalculates the size of the thumbs slider container. Does nothing if there is no thumbs slider.

Returns Promise<any>: A Promise that resolves when the update is done.

slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>Copy Anchor Link

Slides to the next slide. Does nothing until the slider has initialized.

slideNextLoop(speed?: number, runCallbacks?: boolean) => Promise<void>Copy Anchor Link

Same as slideNext, for sliders with loop on. Does nothing until the slider has initialized.

slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>Copy Anchor Link

Slides to the previous slide. Does nothing until the slider has initialized.

slidePrevLoop(speed?: number, runCallbacks?: boolean) => Promise<void>Copy Anchor Link

Same as slidePrev, for sliders with loop on. Does nothing until the slider has initialized.

slideReset(speed?: number, runCallbacks?: boolean) => Promise<void>Copy Anchor Link

Returns the slider to the position of the currently active slide. Does nothing until the slider has initialized.

slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<any>Copy Anchor Link

Slides to the slide at the given index. Does nothing until the slider has initialized.

Returns Promise<any>: A Promise that resolves to what Swiper slideTo returns.

slideToClosest(speed?: number, runCallbacks?: boolean) => Promise<void>Copy Anchor Link

Moves the slider to the closest slide position. Does nothing until the slider has initialized.

slideToLoop(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>Copy Anchor Link

Same as slideTo, for sliders with loop on: slides to the slide whose real index (the index in the original slides) matches. Does nothing until the slider has initialized.

sliderInit() => Promise<any>Copy Anchor Link

Calls Swiper init() on the main slider. Does nothing until the slider has initialized.

Returns Promise<any>: A Promise that resolves when it has finished.

sliderInstance() => Promise<any>Copy Anchor Link

Returns the Swiper instance of the main slider so you can use the Swiper API directly.

Returns Promise<any>: A Promise that resolves to the Swiper instance, or undefined before the slider has initialized.

thumbsSlideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<any>Copy Anchor Link

Slides the thumbs slider to the slide at the given index. Does nothing if there is no thumbs slider.

Returns Promise<any>: A Promise that resolves to what Swiper slideTo returns.

thumbsSliderInit() => Promise<any>Copy Anchor Link

Calls Swiper init() on the thumbs slider. Only call it with type="thumbs" after the slider has initialized, otherwise it throws.

Returns Promise<any>: A Promise that resolves when it has finished.

thumbsSliderInstance() => Promise<any>Copy Anchor Link

Returns the Swiper instance of the thumbs slider (only exists with type="thumbs").

Returns Promise<any>: A Promise that resolves to the thumbs Swiper instance, or undefined.

thumbsSliderUpdate() => Promise<any>Copy Anchor Link

Runs Swiper update() on the thumbs slider. Only call it with type="thumbs" after the slider has initialized, otherwise it throws.

Returns Promise<any>: A Promise that resolves when the update is done.

thumbsSliderUpdateSlides() => Promise<any>Copy Anchor Link

Runs Swiper updateSlides() on the thumbs slider. Only call it with type="thumbs" after the slider has initialized, otherwise it throws.

Returns Promise<any>: A Promise that resolves when the update is done.

update() => Promise<void>Copy Anchor Link

Recalculates the slider (size, slides, progress and classes). Call it after you add or remove slides in JavaScript, or after showing a slider that was hidden. Does nothing until the slider has initialized.

updateAutoHeight(speed?: number) => Promise<void>Copy Anchor Link

Recalculates the slider height to match the active slide. Useful with auto-height. Does nothing until the slider has initialized.

updateProgress() => Promise<void>Copy Anchor Link

Recalculates the slider progress value. Does nothing until the slider has initialized.

updateSize() => Promise<any>Copy Anchor Link

Recalculates the size of the slider container. Call it after the container size changed. Does nothing until the slider has initialized.

Returns Promise<any>: A Promise that resolves when the update is done.

updateSlides() => Promise<void>Copy Anchor Link

Recalculates the number of slides and their offsets. Call it after you add or remove slides in JavaScript. Does nothing until the slider has initialized.

updateSlidesClasses() => Promise<void>Copy Anchor Link

Updates the active, previous and next classes on the slides and pagination bullets. Does nothing until the slider has initialized.

SlotsCopy Anchor Link

RelatedCopy Anchor Link

Used inside: <salla-attachment-view>, <salla-cart-coupons>, <salla-gifting>, <salla-loyalty>, <salla-loyalty-panel>, <salla-loyalty-program>, <salla-multiple-bundle-product-options-modal>, <salla-multiple-bundle-product-slider>, <salla-offer>, <salla-offer-modal>, <salla-products-slider>, <salla-reviews>, <salla-reward-details>.