# Image - Video Slider ## Introduction Transform your website experience with the **VC Video & Image Slider**—an innovative tool that seamlessly integrates both images and videos, creating effortless transitions that captivate your audience. Let your creativity take the spotlight! ## Features * **No of image/videos per slide**: adjust number of image(s)/video(s) to display per slide. * **Slider Types**: Choose from Slide, Fade, or Loop options to suit your design needs. * **Slide Direction**: Customize movement with left-to-right, right-to-left, or top-to-bottom directions. * **Pagination Options**: Show or hide pagination and adjust its direction (left-to-right, right-to-left, or top-to-bottom). * **Advanced Customizations**: Set transition speed, autoplay intervals, and enable drag slides, mousewheel drag, keyboard navigation, or pause-on-hover functionality. * **Video Player Customization**: Tailor the player’s appearance and style. * **Navigation Styles**: Personalize navigation to match your site’s aesthetic. * **Slider Syncing**: Synchronize two sliders with the same content list for seamless interaction. * **Image Scroll:** Fixed width images with infinite scroll. ## Demo editor {% embed url="" %} ## Demo page {% embed url="" %} ## Element
### Data Parameters | Title | Description | Type | | ------------------- | ----------------------------------- | ---- | | Image list | List of images | Text | | Video list | List of video files | File | | Youtube video links | List of full URLs of youtube videos | Text | | Vimeo video links | List of full URLs of Vimeo videos | Text | ### Video player options | Title | Description | Type | | ---------------------------------------- | -------------------------------------------------------------------------------------------------- | -------- | | Show video's video as thumbnail | Show HTML5 video with no controls and just thumbnail, not playable video. Hides all control | Checkbox | | Prevent HTML5 video download | Prevent video download | Checkbox | | Fullscreen button and full screen videos | Fullscreen button in control panel. Also prevents fullscreen for HTML 5 video and alternate player | Checkbox | | Use alternate video player | Use alternate video player instead of HTML5 video player. | Checkbox | | Player control color | Color of alternate video player controls. Also used in video thumbnails | Color | ### Alternate player settings
| Title | Description | Type | | ----------------------- | ---------------------------------------------------------------------------------------- | -------- | | Middle play button | Play button in the middle of the video player | Checkbox | | Play button in controls | Play button in the control panel | Checkbox | | Video current time | Current time in control panel | Checkbox | | Video progress bar | Video seek bar in control panel | Checkbox | | Mute button | Mute button in control panel | Checkbox | | Volume bar | Volume bar in control panel | Checkbox | | Setting button | Settings button in control panel | Checkbox | | Picture in picture | Picture in picture (PIP) button in control panel. Also disable PIP in HTML5 video player | Checkbox | | Airplay button | Airplay button for casting in control panel | Checkbox | ### Slider settings
| Title | Description | Type | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | Slider type | type of slider transition. If more than 1 image per slide, fade is not supported | Dropdown | | Slide direction | Image sliding direction. Top to bottom sliding is in bet and may not function with each case | Dropdown | | Images or videos per slide | Number of images to display per slide view. Note: ignored when slider type is fade. Also ignored when fixed width and height is provided | Number | | Gap between images or videos | Gap between images or videos | Number | | Slide padding | Sets padding left/right for the horizontal carousel or top/bottom for the vertical carousel. | Number | | Slide background color | Background color while content is smaller than display area | Color | | Fit images to container | Fit image if image is smaller than element container. Ignored if fit image is selected. | Checkbox | | Cover images to container | Content will cover the whole render area. Pictures will fill the parent container. More than one item per slide is also supported. It will override fir images | Checkbox | | Image width |

Fixed width of an image in px (Image height is required) | | |

| Number | | | Image height | Fixed height of an image in px (Image width is required) | Number | ### Navigation setting
| Title | Description | Type | | --------------------------- | ------------------------------------------------------------------------------------------------------- | -------- | | Pagination | Show pagination on slider | Checkbox | | Auto hide pagination | Only show pagination when hovered. Work only when pagination property is checked | Checkbox | | Pagination direction | Direction of pagination | Dropdown | | Navigation arrows | Show navigation arrows on slider | Checkbox | | Auto hide navigation arrows | Only show navigation when hovered. Work only when navigation arrows property is checked | Checkbox | | Auto rewind | Auto rewind to first image when slider reaches last image. Can not be used with slider type loop option | Checkbox | | Transition speed | Speed of transition from one image to another | Number | | Autoplay | Auto play slides | Checkbox | | Autoplay intervals | Auto play interval in milliseconds. 1 second = 1000 milliseconds | Number | | Pause on hover | While auto play, pause sliding on mouse hover | Checkbox | | Use keyboard navigation | Use arrow keys to navigate to images while focus is on pagination page | Checkbox | | Mouse wheel navigation | Use mouse wheel to slide images | Checkbox | | Allow drag slides | Allow drag slides for navigation | Checkbox | ### Navigation style
| Title | Description | Type | | --------------------------------- | -------------------------------------- | ----- | | Navigation arrow background color | Background color of navigation arrow | Color | | Navigation arrow color | Navigation arrow color | Color | | Pagination color | Pagination color | Color | | Active page color | Color of the pagination of active page | Color | ### ### Sync two slides togather
Below we have an example how to sync two sliders with same selected image/video.
Below is how you configure it.
## Plugin Actions ### Previous slide Slider
Go to previous slide of a slider using this action. ### Next slide Slider
Go to next slide of a slider using this action. ### Goto slide Slider
Jump to the slide number of a slider using this action. ## Plugin event ### A slider clicked
This plugin includes an event called "A slider clicked," which you can leverage for various use cases. Additionally, it offers an exposed state named "Selected URL," which provides the URL of the currently displayed image or video in the slider. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://vizualcoders.gitbook.io/vcplugins/slider.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.