Image Slider

<sw-image-slider>

ready
Renders an image slider with possible image descriptions

Usage

Loading...
<sw-image-slider
        :images="[
            {
                src: 'my/path/to/asset/test.png',
                description: 'This Image is awesome!'
            },
            'my/path/to/asset/test2.png',
            'http://external.path/to/asset/test3.png',
            {
                src: 'http://external.path/to/asset/test4.png',
            }
        ]"
        :canvasWidth="600"
        :canvasHeight="300"
        overflow="visible"
        navigationType="all"
        enableDescriptions>
</sw-image-slider>

Component properties

Property name Type Default
images Array
canvasWidth Number
canvasHeight Number
gap Number 20
navigationType String arrow
enableDescriptions Boolean false
overflow String hidden

Methods

Method name Parameters
setCurrentPageNumber pageNumber
isImageObject image
hasValidDescription image
getImage image
imageAlt index
goToPreviousImage No parameters
goToNextImage No parameters
elementStyles image index
borderStyles image

Imports

  • ./sw-image-slider.html.twig
  • ./sw-image-slider.scss

Twig blocks

  • sw_image_slider_image
  • sw_image_slider_image_container
  • sw_image_slider_element_description
  • sw_image_slider_images
  • sw_image_slider_image_container_scrollable
  • sw_image_slider_image_container_arrow_left
  • sw_image_slider_image_container_arrow_right
  • sw_image_slider_image_container_arrows
  • sw_image_slider_buttons
  • sw_image_slider_button_container
  • sw_image_slider