Wix Harmony Editor: Adding and Customizing a Slideshow
Think of a slideshow as a way to spotlight content on your site. It's perfect for showcasing products, highlighting key messages, or simply adding energy and movement to your pages. Get started with easy-to-use presets, or dive into advanced design options and create a unique look for each slide.
Add features like customizable navigation arrows, slide indicators and smooth horizontal or vertical transitions. Built-in mobile support gives your visitors a seamless swipe experience, plus the option to hide navigation arrows on smaller screens.
Adding a slideshow
Begin by adding a slideshow from the Add Elements panel. Choose a look you love from a range of professionally designed presets, ready to match your site’s style.
To add and set up a slideshow:
Click + Add at the top left of the editor.
Select Elements.
Hover over the More Options icon
, then scroll down and click Gallery
.
Select the Slideshows tab.
Drag a slideshow onto your page.
Customizing your slideshow's design
Your slideshow can be as dynamic as you want - add images or videos, write a message, or include buttons. The more variety you add to each slide, the more you’ll invite your visitors to click through and explore.
To customize your slideshow:
Click the slideshow element on the page.
Choose what you want to do:
Customize the slideshow's design
Design every part of the slideshow to match your style - you can customize the slideshow as a whole, the slide indicators and the navigation buttons (including text).
Click the All design options icon
on the action bar.
Select the relevant part of the slideshow under Choose what to design.
Design the part of the slideshow using the available options.
Fill
: Change the color of your element, choosing one of your brand colors or a custom color.
Borders
: Define the borders of your element so it stands out, choosing a color, width and style. Click the Edit individual borders icon
to design each side of the border separately.
Corners
: Make the corners of your element squarer or rounder by dragging the slider under Radius. Click the Edit individual corners icon
to design each corner separately.
Shadow
: Apply inner and outer shadow to give the element an interesting 3D effect, setting the position, blurriness, color and more.
Spacing
: Add breathing room to your content by adding padding around the element (or the selected area).
Layout
: Customize the positions of your navigation buttons and slide indicators, adjust the site direction of parts of the slideshow and more. Learn more about customizing your slideshows navigation.
Note: Available design options vary depending on the part of the slideshow you're designing.
Add elements to the slideshow
Click + Add at the top left of the editor.
Drag an element on to the slideshow and drop it when you see the Attach to Container message.
Design the element using the available options.
Adjusting the slideshow settings
Customize your slideshow’s rhythm. Decide whether you want slides to loop, play on their own, or display with dramatic transitions.
To adjust the settings:
Click the slideshow element on the page.
Click the Settings icon
on the action bar.
Choose what to customize:
Continuous loop: Enable the toggle to make the slides loop infinitely.
Autoplay: Enable the toggle to have the slideshow play automatically once the site loads.
Time on each slide: Drag the slider to adjust how long in seconds each slide remains on the screen.
Pause on hover: Enable the toggle to pause the slideshow when visitors scroll over it.
Show pause & play button: Enable the toggle to display a 'pause & play' button.
Transitions: Click the drop-down to select how slides change: None, Slide, Cross-fade or In-and-out.
Transition direction: Choose how the slides move: Left-to-right, Right-to-left, Top-to-bottom or Bottom-to-top.
Transition duration: Drag the slider to adjust how quickly slides move (in seconds).
Accessibility: Click Accessibility and add a description in the Accessible name field to make your slideshow accessible for visitors using assistive technology.
Customizing the slideshow's navigation
Guide your audience through every slide with custom navigation. You can decide whether to display just navigation arrows or slide indicators, or both.
Choose the navigation icons, and customize the buttons' and indicators' design and layout so every detail works with your vision.
To customize the navigation:
Click the slideshow element on the page.
Choose what you want to do:
Choose what navigation elements to display
Click the Display elements icon
on the action bar.
Select the checkbox next to what you want to display:
Slide indicators: Allow visitors to see their position in your series of slides.
Navigation buttons: Display navigation buttons on either side of your slideshow. These buttons can show Text, Icon or both.
Adjust the navigation button icons
You can display a navigation button with a static or animated icon. Animated icons bring your buttons to life by adding motion and style. Set your own start and end icons, customize how the animation looks, and adjust its speed to fit your site’s design.
To change the static icon of a navigation button:
Click Customize Icon on the action bar and select a new icon.
Click the Replace icon
.
Select an icon from the Media Manager or upload your own.
Click Update.
To add an animated icon:
Click Customize Icon on the action bar.
Click Animated.
Click Create Animated Icon.
Click the Add icon
under Start icon.
Scroll through the available options, or filter by:
Type: Choose a basic vector art shape, or an app icon.
Category: Select a category for each icon type, such as actions, toggles, or social media app icons.
Orientation: Filter the options by horizontal or vertical icons.
Select a design you like and click Update.
Click the Add icon
under End icon.
Select a design you like and click Update.
Click Back.
Drag the Duration slider to adjust the how long the animation plays.
Edit the navigation button text
Personalize the text you're showing on your slideshow's navigation buttons (e.g. 'Back', 'Next').
Click Edit Text on the action bar.
Enter your text under Previous navigation button text and Next navigation button text.
Customize the navigation buttons and slide indicators layout
Click the All design options icon
on the action bar.
Click the Layout.
Customize the following:
Orientation: Choose how your sideshow navigation elements are oriented within the slideshow: Horizontal or Vertical.
Navigation button arrangement: Choose how to display your buttons:
Together: Display your buttons side by side.
Navigation button alignment: Choose how to align your buttons within the slideshow: Start, Center or End.
Separated: Display your buttons apart.
Slide indicator position: Choose where to display your indicators:
Horizontal slideshow orientation: Display the indicators on the Top or Bottom.
Vertical slideshow orientation: Display the indicators at the Start or End.
Navigation button position: Choose where to position your buttons: Top, Center or Bottom.
Managing the slides
Keep things organized by renaming or deleting slides as you go. That way, your slideshow always shows exactly what you want.
To manage the slides:
Click the slideshow element on the page.
Click Manage Items on the action bar.
Hover over the relevant slide and click the More Actions icon
.
Choose what to do next:
Edit: Enter a new name for this slide that reflects its content.
Duplicate: Create a copy of this slide to add new content to the slideshow while keeping the design consistent.
Delete: Remove the slide if you no longer need it.
FAQs
Click a question below to learn more about adding and customizing a slideshow:
How can I reorder slides?
Click the slideshow element on the page.
Click Manage Slideshow on the action bar.
Click and drag the slides to change their order.
How can I switch between slides?
Click the slideshow element on the page.
Click Manage Slideshow on the action bar.
Click the relevant slide.
How do I show or hide navigation buttons?
Click the slideshow element on the page.
Click the Display Elements icon
on the action bar.
Enable / disable the checkbox next to Navigation buttons.
Need A Professional Website?
Contact Us Today!
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected