Banner Slider

Custom banners

-> Go to Appearance and select Banners

Creating Custom Banners: Go to Appearance and select Banners | supunkan

-> Click +Add

Creating Custom Banners: Click +Add | supunkan

-> Name the Banner

Creating Custom Banners: Name the Banner | supunkan

-> Click to Activate the text position on the image

Creating Custom Banners: Click to Activate the text position on the image | supunkan

-> Config Dimension: You can change the image size

Creating Custom Banners: Config Dimension allows changing image size | supunkan Creating Custom Banners: Config Dimension allows changing image size | supunkan

-> Manage content on the image: click the image you want

Creating Custom Banners: Manage content on the image | supunkan Creating Custom Banners: Manage content on the image | supunkan

-> Setting banners

✅ Main Settings

loop: true/false If true → when the slide reaches the end, it will automatically loop back to the beginning.
If false → the slide stops at the last item and does not loop.
center: true/false If true → keeps the selected item always centered.
margin: 0 Spacing (px) between each item (here it is 0 px, no spacing).

✅ Mouse & Touch Control

mouseDrag: true/false Allows dragging the slide with the mouse.
touchDrag: true/false Allows sliding with touch/swipe on mobile devices.

✅ Autoplay

autoplay: true/false If true → the slides play automatically.
autoplayHoverPause: true/false Pauses autoplay when the mouse hovers over the slide.
autoplaySpeed: 3000 Speed of autoplay transition (milliseconds → 3 seconds).
autoplayTimeout: 5000 Time to pause before moving to the next slide (5 seconds).

✅ Dots & Navigation Buttons

dots: true/false Show small circular buttons under the slide (indicators).
dotsSpeed: 1000 Speed of slide transition when clicking a dot (1 second).
nav: true/false Show left-right arrow buttons.
navSpeed: 1000 Speed of slide transition when clicking navigation buttons (1 second).

✅ Animation

animateIn: 'fadeIn' Effect used when a slide enters: Fade In.
animateOut: 'slideOutDown' Effect used when a slide exits: Slide Out Down.