SliderType

The parameter is responsible for specifying the product's layout on the plugin screen.

sliderType: number

SliderType: 1 (default)

Horizontal layout

  ProductSlider({
    apiKey: 'SNGbv8bSovxeDDDAXMS4Qm-ncTd8LOfORRVe0pdPkTk6o-jbu9',
    backgroundURL: 'https://your-domain.com/url-address-of-the-image.jpg',
    sliderType: 1,
    sliderPerView: {
      1200: 5,
      992: 3,
      768: 2,
      320: 1.5
    },
    enablePreview: true,
    enableAutoHover: true,

    rootID: 'printlean'
  });
sliderType:1

SliderType: 2

Two-row horizontal layout

 ProductSlider({
    apiKey: 'SNGbv8bSovxeDDDAXMS4Qm-ncTd8LOfORRVe0pdPkTk6o-jbu9',
    backgroundURL: 'https://your-domain.com/url-address-of-the-image.jpg',
    sliderType: 2,
    sliderPerView: {
      1200: 5,
      992: 3,
      768: 2,
      320: 1.5
    },
    enablePreview: true,
    enableAutoHover: true,

    rootID: 'printlean'
  });
sliderType:2

SliderType: 3

Vertical layout

ProductSlider({
    apiKey: 'SNGbv8bSovxeDDDAXMS4Qm-ncTd8LOfORRVe0pdPkTk6o-jbu9',
    backgroundURL: 'https://your-domain.com/url-address-of-the-image.jpg',
    sliderType: 3,
    sliderPerView: {
      1200: 5,
      992: 3,
      768: 2,
      320: 1.5
    },
    enablePreview: true,
    enableAutoHover: true,
    rootID: 'printlean'
  });
sliderType:3

SliderType: 4

Hierarchical layout

ProductSlider({
    apiKey: 'SNGbv8bSovxeDDDAXMS4Qm-ncTd8LOfORRVe0pdPkTk6o-jbu9',
    backgroundURL: 'https://your-domain.com/url-address-of-the-image.jpg',
    sliderType: 4,
    sliderPerView: {
      1200: 5,
      992: 3,
      768: 2,
      320: 1.5
    },
    enablePreview: true,
    enableAutoHover: true,

    rootID: 'printlean'
  });
sliderType:4

SliderType: 5

In small image case only button is shown

ProductSlider({
    apiKey: 'SNGbv8bSovxeDDDAXMS4Qm-ncTd8LOfORRVe0pdPkTk6o-jbu9',
    backgroundURL: 'https://your-domain.com/url-address-of-the-image.jpg',
    sliderType: 5,
    sliderPerView: {
      1200: 5,
      992: 3,
      768: 2,
      320: 1.5
    },
    enablePreview: true,
    enableAutoHover: true,
    rootID: 'printlean'
  });
sliderType: 5

Last updated