Slideshows are a fun, interactive way to display content and information on your site. Slideshows can be used to display almost anything on your site. Some examples include:
  To introduce your busine...

Wix Editor: Adding and Setting Up a Slideshow

Discover how to create engaging slideshows on your site to showcase your business, promote offers, or display portfolios. Learn to add and customize both full-width and box slideshows using the editor, manage slides, and incorporate various elements like text and images. You can also personalize the design and choose how slideshows play on your live site, enhancing user interaction and exploration.

<div data-component-type="text"><div>Slideshows are a fun, interactive way to display content and information on your site. </div></div><div data-component-type="text"><div>Slideshows can be used to display almost anything on your site. Some examples include:</div><div><br /></div></div><div data-component-type="text"><ul>
  <li>To introduce your business </li>  <li>To promote sales and special offers</li>  <li>To create modelling, photography, and art portfolios</li>  <li>To show previews of other pages or areas of your site</li>  <li>To highlight specific products</li>  <li>To showcase your services</li>  <li>To display your contact details</li></ul></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/14/d0c6b70a-c8ed-4238-91cf-11b25fbf4819/d7520728-1350-4d8a-98df-809c8aebfbe8.gif" alt="gif of slideshow showcasing a 3 different images. the mouse is navigating through the images using the menu and arrows." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-slideshow" level="3">Adding a slideshow</h2></div><div data-component-type="text"><div>You can add a slideshow from the Add panel in the editor. It includes several pre-designed slideshows for you to edit and customize in seconds. </div></div><div data-component-type="text"><div>There are two types of slideshows; <strong>full-width</strong> and <strong>box</strong>. Full-width slideshows span the width of your page, whereas box slideshows can be adjusted to the width you want.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a slideshow:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Add Elements </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png" /> on the left side of the editor.</li>  <li>Click <strong>Interactive</strong>.</li>  <li>Click to full-width or box slideshows.</li>  <li>Click a slideshow to add it, or drag the slide element to the relevant location. </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/14/c696de88-b560-4f6d-931d-25fbf91cadc1/9b547f39-7fe1-45f8-97c3-124d6772c072.png" alt="Screenshot of the add panel in the Wix Editor showing slideshow presets" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-slides-to-your-slideshow" level="3">Adding slides to your slideshow</h2></div><div data-component-type="text"><div>Add as many slides as you want to your slideshow from the Manage Slides panel. You can choose to add a new slide or duplicate slides which allows you to keep a consistent design throughout your slideshow.</div></div><div data-component-type="heading"><h2 id="" level="4">To add more slides:</h2></div><div data-component-type="text"><ol>
  <li>Click your slideshow in the editor.</li>  <li>Click <strong>Manage Slides</strong>.</li>  <li>Click an option:
    <ul>
      <li><strong>Duplicate Slide: </strong>This duplicates the slide that is highlighted in your slide list. It's a great option if you want to add another slide with the same design. You can then adjust the content on the new slide as you need.</li>      <li><strong>Add New Slide: </strong>This adds a slide with the same background as the one that is highlighted in your slide list, without any content.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/07/21/12e92e4b-4d46-45b0-8988-9b7aae82b03c/4d3ed4f3-8d03-43d7-bde5-f0e901321534.png" alt="Screenshot showing a slideshow in the Wix Editor. The Manage Slides panel has been opened." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="building-your-slideshows-content" level="3">Building your slideshow's content</h2></div><div data-component-type="text"><div>Add whatever elements you want to your slideshow including text, images, videos and buttons. </div></div><div data-component-type="text"><div>We recommend that you add different content to each slide to encourage your visitors to keep interacting and exploring your site.</div></div><div data-component-type="heading"><h2 id="" level="4">To add content to your slideshow:</h2></div><div data-component-type="text"><ol>
  <li>Click your slideshow in the editor.</li>  <li>Click the blue arrows to navigate to the relevant slide.</li>  <li>Drag an element on to the slideshow to the position you want.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/07/21/89af2d02-ed8e-4100-9a35-b9eb18362311/6b2434b1-5d6d-4a38-9296-47d057fd4fc5.gif" alt="GIF showing a cursor clicking through slides in the Wix Editor." /></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>Make sure that the elements that you are adding to the slideshow are smaller than the slideshow  itself, so that they fit inside it.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">FAQs</h2></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do I navigate between slides inside the editor?</h4><div class="collapsible-content"><div>To access and edit a slide in your slideshow, click the slideshow in your editor, then click the arrows next to the slide number to navigate between them.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/14/d519b01e-ff53-45fd-b697-5457e437ec8d/c349c5d5-4452-40f2-af7f-f3e36a72d6b6.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I design my slideshow?</h4><div class="collapsible-content"><div>Absolutely. Use the design panel to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-slideshow" target="">customize your slideshow background</a>, and add options such as borders and shadows.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/14/56741fd0-d3fa-4b1a-8440-37bd74ecc0e0/a202f5ea-da7b-4a5d-b91d-686b5b77bf0a.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How do slideshows play on my live site?</h4><div class="collapsible-content"><div>You can choose how slideshows play on your live site from the following options:</div><div><br /></div><ul>
  <li><strong>Autoplay:</strong> The slideshow automatically plays for your visitors when the page loads. You can adjust the time between slides. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-setting-how-your-slideshow-plays#changing-your-slideshows-autoplay-settings" target="">Learn how to set up autoplay</a>.</li>  <li><strong>Navigation buttons and arrows:</strong> You can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-displaying-navigation-buttons-and-arrows-on-your-slideshow" target="">add navigation buttons and arrows</a> to your slideshow so visitors can manually click through the slides at their own pace. </li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Can I display content hanging over the edge of my slideshow? </h4><div class="collapsible-content"><div>Absolutely. When designing your slideshow, you may see that some of your slideshow content is hanging over the edge of the slideshow frame. You can choose to cut the content that is over the edge, or leave it like that.<br />
<br />
To change the content outside frame setting:<br />
<br />
Click the slideshow in the editor.</div><ol>
  <li>Click the <strong>Settings </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/05/29/d823a9fd-7bf8-4698-a385-7e04bb0a1131.png" />.</li>  <li>Click the <strong>Hide content outside frame </strong>toggle:
    <ul>
      <li><strong>Enabled:</strong> Elements that are over the edge of the slide are cut off so that they appear inside the slide only.</li>      <li><strong>Disabled:</strong> Elements that are over the edge of the slide are not cut off.</li>    </ul>  </li></ol></div></div></div>

Slideshows are a great way to display multiple content boxes in a single space. Fill your Slideshow with whatever you want to show - text, images or video. Learn more about Slideshows styles:Creating ...

Wix Editor: Slideshow Styles Examples

Discover how to create engaging slideshows using the slideshow element to showcase text, images, or videos on your site. Learn to design stunning text presentations and personalized galleries by adding and customizing content for each slide. This article guides you through the steps to enhance your site’s visual appeal and effectively communicate your message.

<div data-component-type="text"><div>Slideshows are a great way to display multiple content boxes in a single space. Fill your Slideshow with whatever you want to show - text, images or video. </div></div><div data-component-type="text"><div>Learn more about Slideshows styles:</div></div><div data-component-type="text"><ul><li><a href="https://support.wix.com/en/article/wix-editor-slideshow-styles-examples#creating-a-text-slideshow">Creating a Text Slideshow</a></li><li><a href="https://support.wix.com/en/article/wix-editor-slideshow-styles-examples#creating-a-gallery-using-a-slideshow">Creating a Gallery Using a Slideshow</a></li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="creating-a-text-slideshow" level="3">Creating a Text Slideshow</h2></div><div data-component-type="text"><div>Create stunning text presentations using the slideshow element!</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/06/29/fb06720b-9e7e-47a2-8cf4-605ca44d08c5.gif" alt="gif of slideshow with text. slides being navigated through using arrows at the side and the menu at the bottom of the slides." /></div></div><div data-component-type="heading"><h2 id="" level="4">To create a text slideshow:</h2></div><div data-component-type="text"><ol><li><a href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-slideshow">Add a slideshow</a>.</li><li><a href="https://support.wix.com/en/article/wix-editor-adding-and-editing-text">Add a text element</a>.</li><li>Click <strong>Edit Text</strong> and enter your text.</li><li>Drag your text on to your slideshow.</li><li>Repeat steps 2-4 for each slide in your slideshow.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Use the arrows to navigate between your slides while you edit.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="creating-a-gallery-using-a-slideshow" level="3">Creating a Gallery Using a Slideshow</h2></div><div data-component-type="text"><div>Create a stunning personalized gallery using the slideshow element! </div></div><div data-component-type="text"><div>By using the slideshow element rather than a regular gallery, you can design it how you want and add your own customized text.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/06/29/702bccfa-847e-4787-a3a7-9df82478cd82.gif" alt="gif of slideshow. slides being navigated through using arrows at the side and the menu at the bottom of the slides." /></div></div><div data-component-type="heading"><h2 id="" level="4">To create a gallery using the slideshow element:</h2></div><div data-component-type="text"><ol><li><a href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-slideshow">Add a slideshow.</a></li><li>Click <strong>Change Slide Background</strong> and add your image or video.</li><li>(Optional) <a href="https://support.wix.com/en/article/wix-editor-adding-and-editing-text">Add a text element.</a></li><li>Click <strong>Edit Text</strong> and enter your text.</li><li>Drag the text element onto your slideshow.</li><li>Repeat steps 2-5 for each slide in your slideshow.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>You can also add videos to your slideshow. </div></div></div></div>

Customize your slideshow so that it looks exactly how you want. You can select a different background for each slide and adjust specific features of the slides such as the border and corners.Changing ...

Wix Editor: Customizing the Design of Your Slideshow

Customize your slideshow to perfectly match your vision by changing backgrounds, borders, and design features. Learn how to add unique backgrounds for each slide using images, videos, colors, or gradients. You can also enhance your slideshow's design with customizable fill colors, borders, shadows, and corner styles to align with your brand. This article guides you through the steps to create a visually appealing slideshow that stands out on your site.

<div data-component-type="text"><div>Customize your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-slideshow" target="">slideshow</a> so that it looks exactly how you want. You can select a different background for each slide and adjust specific features of the slides such as the border and corners.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-your-slideshow-background" level="3">Changing your slideshow background</h2></div><div data-component-type="text"><div>Change the background of your slides by adding an image, video, color or gradient.</div></div><div data-component-type="text"><div>Each slide can have a different background, so you can use each one to display different media or color themes, depending on your needs.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/14/69d91e20-3100-4234-bee4-dcf83e660804/af16915e-ef76-44a5-bfc1-1b6c4c6e50e6.png" alt="A screenshot of a box slideshow alongside the change background panel" /></div></div><div data-component-type="heading"><h2 id="" level="4">To change the background of your slideshow:</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in the editor.</li>  <li>Click the arrows next to the slide number to navigate to the relevant slide.</li>  <li>Click <strong>Change Slide Background</strong>.</li>  <li>Choose the type of background you want to add:
    <ul>
      <li><strong>Image </strong>or <strong>Video:</strong>
        <ol>
          <li>Click <strong>Image </strong>or <strong>Video</strong>.</li>          <li>Select a file from the Media Manager or click <strong>Upload Media</strong>.</li>          <li>Click <strong>Change Background</strong>.</li>        </ol>      </li>      <li><strong>Color </strong>or<strong> Gradient</strong>:
        <ol>
          <li>Click <strong>Color</strong>.</li>          <li>Select from one of the following options:
            <ul>
              <li><strong>Color:</strong> Select a color from the Color Picker and use the settings to adjust its opacity.</li>              <li><strong>Gradient </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/06/28d70a3a-ae83-4954-8d9b-073aa3b38f20/e8713ee8-70f5-4452-9556-0a9cff5a6b1b.png" /><strong>: </strong>Apply a cool effect to your slideshow background with a Linear, Radial, or Conic gradient. </li>              <li><strong>Fluid gradient </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/11/06/ef82e401-93f4-46ab-a657-9dfa2a826274/63c1e3a7-ec0f-4f50-8f6b-edb83e17463a.png" /><strong>: </strong>Make your slideshows stand out with a sophisticated fluid gradient. </li>            </ul>          </li>        </ol>      </li>    </ul>  </li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-the-design-options-of-your-slideshow" level="3">Customizing the design options of your slideshow</h2></div><div data-component-type="text"><div>Design your slideshow to promote your brand and aesthetic. You can customize settings such as the fill color, as well as add shadows and borders to give your slideshows depth. </div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/14/7b89a758-0ef4-41d6-afcb-94dd18fad60f/f906cadb-cdee-455a-a7b3-f30fcd62080f.png" alt="A screenshot of a box slideshow alongside the design panel, adjusting the border opacity" /></div></div><div data-component-type="heading"><h2 id="" level="4">To customize the design of your slideshow:</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in your editor.</li>  <li>Click the <strong>Design</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/06/16/cd32e19c-d7b7-4f0b-8a81-88e7d79f39bc.png" />.</li>  <li>(Optional) Select a preset design from the top of the panel.</li>  <li>Customize the preset design using the options:
    <ul>
      <li><strong>Fill Color &amp; Opacity</strong>: Choose a color and set the opacity of your navigation arrows and buttons to match your site's theme.</li>      <li><strong>Borders:</strong> Choose a color and adjust the opacity and width of your border to make the slideshow stand out on your page.</li>      <li><strong>Corners: </strong>Adjust the radius of the corners to make the border more circular.</li>      <li><strong>Shadow</strong>: Create and customize a shadow to add depth to your slideshow. You can adjust settings such as the angle and distance to have it look exactly as you want.</li>    </ul>  </li></ol></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Notes:</div><div class="info-content"><ul>
  <li>The design options available depend on the preset you choose.</li>  <li>Only the<strong> Fill Color &amp; Opacity </strong>options are available for full-width slideshows.</li></ul></div></div></div>

Add navigation tools to your slideshow to let your visitors click through the slides manually. You can add:
  Slide buttons: These are circular icons that your site visitors can click to move between ...

Wix Editor: Displaying Navigation Buttons and Arrows on Your Slideshow

Enhance your slideshow by adding navigation tools that allow visitors to click through slides manually. Learn how to incorporate slide buttons and navigation arrows, customize their appearance, and adjust their size and spacing in the editor. This feature empowers your audience to navigate at their own pace, improving their overall experience on your site.

<div data-component-type="text"><div>Add navigation tools to your slideshow to let your visitors click through the slides manually. You can add:</div></div><div data-component-type="text"><ul>
  <li><strong>Slide buttons: </strong>These are circular icons that your site visitors can click to move between your slides. When your site visitors click a slide button, the relevant slide is displayed.</li>  <li><strong>Navigation arrows:</strong> These are arrows that are displayed either side of your slideshow, and allow your visitors to click through the slides at their own pace.</li></ul></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/02/f5371495-2e4a-4bd0-8189-370024b83133/932dcc13-6af0-46b6-b8a5-14291022c33f.png" alt="A slideshow on a live site. The navigation arrows and slide buttons are highlighted by orange boxes." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="displaying-buttons-and-arrows-on-your-slideshow" level="3">Displaying buttons and arrows on your slideshow</h2></div><div data-component-type="text"><div>From Layouts, you can choose to show or hide the slide buttons and navigation arrows on your slideshow. </div></div><div data-component-type="heading"><h2 id="" level="4">To display buttons or arrows on your slideshow:</h2></div><div data-component-type="text"><ol>
  <li>Click your slideshow in the editor.</li>  <li>Click the <strong>Layout </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/01/21/862bec80-a0b0-4690-a058-f7c8c3e7a623.png" /> and choose what you want to display:
    <ul>
      <li><strong>Show navigation arrows: </strong>Enable the toggle to display the arrows.
        <ul>
          <li>Drag the sliders to customize the size and offset.</li>        </ul>      </li>      <li><strong>Show slide buttons: </strong>Enable the toggle to display the buttons.
        <ul>
          <li>Drag the sliders to customize the size, offset and spacing.</li>        </ul>      </li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/14/88b80023-2a34-42e3-9874-15e3d4bf3a68/f037b30a-1b86-4e49-85e3-d763ff1b5650.png" alt="Screenshot showing the layout panel. The navigation arrows and buttons have been enabled." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="customizing-your-buttons-and-arrows" level="3">Customizing your buttons and arrows </h2></div><div data-component-type="text"><div>Customize your slide buttons and navigation arrows to look exactly as you want, by selecting a color and adjusting the opacity.</div></div><div data-component-type="heading"><h2 id="" level="4">To customize the slide buttons and arrows:</h2></div><div data-component-type="text"><ol>
  <li>Click your slideshow in the editor.</li>  <li>Click the <strong>Design </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/01/21/f8a8baaa-2ead-44b3-baec-66b51db503c3.png" />.</li>  <li>Click the <strong>Fill Color &amp; Opacity</strong> tab.</li>  <li>Customize the design of the buttons or arrows:
    <ul>
      <li><strong>Slide Buttons: </strong>Select a color and set the transparency of the buttons.</li>      <li><strong>Navigation Arrows</strong>: ﻿Select a color and set the transparency of the arrows.﻿</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/14/b2722ff7-c551-4597-8b4c-f9d1696b15c9/463c917b-b7d3-44fd-9b90-6018a440eb8f.png" alt="Screenshot showing the design panel. The cursor is hovering over the opacity slider." /></div></div>

Create the perfect slideshow by organizing your slides to show the content you want.Haven't added a slideshow yet?Learn how to add and set up your slideshow first.Adding new slides to your slideshowHa...

Wix Editor: Managing the Slides in Your Slideshow

Discover how to create the perfect slideshow by adding, reordering, duplicating, renaming, and deleting slides in your Wix Editor. This article guides you through managing your slideshow effectively, ensuring your visitors receive the most relevant content. Enhance your presentation by organizing your slides to showcase important information clearly and efficiently.

<div data-component-type="text"><div>Create the perfect slideshow by organizing your slides to show the content you want.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Haven't added a slideshow yet?</div><div class="info-content"><div>Learn how to <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-slideshow#adding-a-slideshow" target="">add and set up your slideshow</a> first.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-new-slides-to-your-slideshow" level="3">Adding new slides to your slideshow</h2></div><div data-component-type="text"><div>Have new and important content? Add a new slide to your slideshow so your visitors can get all the information they need.</div></div><div data-component-type="heading"><h2 id="" level="4">To add a new slide:</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in your editor.</li>  <li>Click <strong>Manage Slides</strong>.</li>  <li>Click <strong>Add New Slide</strong> at the bottom.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/08/f734110d-f3d0-49c6-a09d-b5df69710f0f/1b4b5bca-ccf8-4322-973c-ecdc3e2632b0.png" alt="The Manage Slides panel in the Editor. The Add New Slide button has been highlighted." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="reordering-slides-in-your-slideshow" level="3">Reordering slides in your slideshow</h2></div><div data-component-type="text"><div>Rearrange your slides to change the order in which your content is displayed to your visitors.</div></div><div data-component-type="heading"><h2 id="" level="4">To reorder your slides:</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in your editor.</li>  <li>Click <strong>Manage Slides</strong>.</li>  <li>Click the <strong>Reorder</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/03/20/07215432-85dc-4c20-8c33-edfb1c9c4d06.jpg" /> on the left of the relevant slide and drag it to your chosen position.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/01/c3211972-2bf9-4372-8220-8f3910b65520/b628a967-a5ca-4fc5-b13c-6241902e81f9.gif" alt="The Manage Slides panel in the Editor. The cursor is rearranging the slides by clicking and dragging them." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="duplicating-slides-in-your-slideshow" level="3">Duplicating slides in your slideshow</h2></div><div data-component-type="text"><div>If you like the look and layout of a slide and would like to add another one that looks similar, you can  duplicate the slide and customize it as needed.</div></div><div data-component-type="heading"><h2 id="" level="4">To duplicate a slide:</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in your editor.</li>  <li>Click <strong>Manage Slides</strong>.</li>  <li>Click the slide from the list.</li>  <li>Click <strong>Duplicate Slide</strong> at the bottom.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/01/7c928da0-993b-4cd2-9cd3-4d1bf7ea7f9e/fd02bbad-41ea-4887-8dd4-4250d4e78bd1.png" alt="The Manage Slides panel. The cursor is hovering over the Duplicate Slide button." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="renaming-your-slides" level="3">Renaming your slides</h2></div><div data-component-type="text"><div>Give your slides names to help you easily identify them while editing or managing your slideshow. We recommend choosing a name that represents the slide's content.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>The names of your slides are only visible in the editor. Your visitors cannot see them on the live site.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To rename your slides</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in your editor.</li>  <li>Click <strong>Manage Slides</strong>.</li>  <li>Hover over the relevant slide and click the <strong>More Actions</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/01/19/6ff4fdc1-f548-4431-b21f-74d96e826af5.png" />.</li>  <li>Click <strong>Rename</strong>.</li>  <li>Enter your slide name in the text field.</li>  <li>Click <strong>Done</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/01/e9767e0c-54c1-42eb-a123-47c9440f2ec5/59b5f43d-e3fd-493b-93e6-a61e41df3e8a.png" alt="The Manage Slides panel. The name of one of the slides is being changed to 'Salads'." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="deleting-slides-from-your-slideshow" level="3">Deleting slides from your slideshow</h2></div><div data-component-type="text"><div>If you no longer need a slide, you can delete it to keep your slideshow up to date.</div></div><div data-component-type="heading"><h2 id="" level="4">To delete a slide:</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in your editor.</li>  <li>Click <strong>Manage Slides</strong>.</li>  <li>Hover over the relevant slide and click the <strong>More Actions</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/01/19/6ff4fdc1-f548-4431-b21f-74d96e826af5.png" />.</li>  <li>Click <strong>Delete</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/06/08/a3f7db52-143d-415e-ab74-1fcfa3d1be13/0352377c-ae1f-484a-98d5-7bbfb68d823e.png" alt="The Manage Slides panel. The cursor is hovering over the option to delete the slide titled 'Salads'." /></div></div>

Choose exactly how your slideshow plays on your site. You can add cool transition effects between slides, as well as set whether the slideshow plays automatically, or if your visitors have to scroll t...

Wix Editor: Setting How Your Slideshow Plays

Discover how to customize your slideshow settings to enhance your site's visual appeal. You can add transition effects, control autoplay options, and decide whether visitors navigate manually or automatically. Learn to set the duration and direction of transitions, and adjust autoplay settings to create an engaging experience for your audience. This article guides you through the steps to make your slideshow captivating and user-friendly.

<div data-component-type="text"><div>Choose exactly how your slideshow plays on your site. You can add cool transition effects between slides, as well as set whether the slideshow plays automatically, or if your visitors have to scroll through it manually.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-transition-effect" level="3">Adding a transition effect</h2></div><div data-component-type="text"><div>Apply a transition effect to your slideshow to choose how the slides move.  </div></div><div data-component-type="text"><div>There are a range of options available, and you can customize how long they play for, as well as the direction they move.</div></div><div data-component-type="heading"><h2 id="" level="4">To apply a transition effect:</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in the editor.</li>  <li>Click the <strong>Settings</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/03/20/0bad375c-d5da-4f9f-b4ec-732ff6664c16.png" />.</li>  <li>Select a transition under <strong>Apply transition effects? </strong>and customize it using the following options:
    <ul>
      <li><strong>How long do they last?:</strong> Choose how long or short your want the transition effects to be.</li>      <li><strong>Where do they start?: </strong>Select the direction the slideshow comes from.<br />
<strong>Note: </strong>This option is available for the vertical and horizontal transitions only</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/07/72275a74-f0c4-4561-8965-9f6dbfd3f6ca/ec9f2542-e4b4-4bc3-bb3b-2a64f92bbcf2.png" alt="screenshot of slidwshow in wix editor. settings panel is selected, the slidwshow panel settings displays settings options" /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>If you disable the <strong>Hide content outside frame</strong> toggle, not all transition options are available.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-your-slideshows-autoplay-settings" level="3">Changing your slideshow's autoplay settings</h2></div><div data-component-type="text"><div>Choose if your slideshow plays automatically when your site visitor opens the page, or if your visitors have to play it manually using the navigation arrows or slide buttons.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>If you disable autoplay, you need to add navigation arrows / buttons to your slideshow so your visitors can access all of the slides.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To change the autoplay setting on your slideshow:</h2></div><div data-component-type="text"><ol>
  <li>Click the slideshow in your editor.</li>  <li>Click the <strong>Settings </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/03/20/bc7d51f8-838d-417d-b66c-268dbf7e0a69.png" />.</li>  <li>Click the <strong>Autoplays on loading</strong> toggle:
    <ul>
      <li><strong>Enabled: </strong>Your slideshow plays automatically when the page loads. The slides play continuously in a loop.
        <ul>
          <li>Drag the <strong>How long between slides? </strong>slider to set the time between slides (in seconds).</li>          <li>Click the <strong>Stop autoplay on hover</strong> toggle:
            <ul>
              <li><strong>Enabled: </strong>When your site visitor hovers over the slideshow, the slides pause on the slide they are viewing.</li>              <li><strong>Disabled: </strong>When your site visitor hovers over the slideshow, nothing happens; it continues playing.</li>            </ul>          </li>        </ul>      </li>      <li><strong>Disabled: </strong>Your slideshow is controlled by your site visitor using the navigation arrows and buttons.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/02/07/e5e27497-1b78-4d63-b0f9-7b1961fd9f6f/44e19141-6f82-449f-9f94-b2eb49eeb4f8.png" alt="screenshot of slidwshow in wix editor. settings panel is selected, the slidwshow panel settings displays settings options" /></div></div>

How to begin

Choosing a template

Hiring a professional to build your site

Build your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.

Getting started with Wix

Learn how to build your website and business using Wix.

Wix Editor basics

Using the Editor tools

Your site's layout

Strips and columns

Your site's structure

Designing your site

Pages

Menus

Managing pages and menus

Text

Buttons

Containers and boxes

Slideshows

Shapes and lines

Adding and customizing elements

Images

Galleries

Videos

Documents and files

Adding files and media

Working with elements

Using effects and animations

Sharing and promoting your site

Adding advanced elements

Getting started

Mobile tools

Pages on mobile

Background on mobile

Mobile site layout

Site menu on mobile

Text on mobile

Media on mobile

Other elements on mobile

Troubleshooting your mobile site

Building a mobile site

Troubleshooting Editor sites

Using the Wix Editor

Using your dashboard

Managing your site

Managing Roles & Permissions

Getting started with AI

Using AI to create & manage your website

Using AI to set up your business

AI tools

Getting started with the editor

Using the editor tools

Structuring your site

Adding animations and effects

Branding your site

Troubleshooting your site

Using the Wix Harmony Editor

Media Manager basics

Uploading media

Purchasing media

Managing media

Troubleshooting media

Adding & managing media

Using the Pro Gallery

Editing images (Wix Photo Studio)

Getting started with Wixel

Creating and managing projects

Designing with Wixel

Upgrading and account management

Wixel

Managing your media

Wix Multilingual basics

Translating your website

Managing languages

SEO in Wix Multilingual

Creating a multilingual website

Privacy and GDPR

About accessibility

Making your site accessible

Advanced accessibility features

Building an accessible site

About the CMS (Content Management System)

Managing CMS collections

Connecting CMS collection content to your site

Working with dynamic pages and the CMS

Connecting user input elements to CMS

Using CMS with other Wix products

Advanced CMS features

Wix for Developers

Test Site

SSO Login

Wix Blocks

Advanced features

Getting started with  Wix Vibe

Managing your Wix Vibe site

Customizing your Wix Vibe site

Publishing your Wix Vibe site

Using Wix Vibe

Read how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.

Creating a website

Design and manage your site with smart functionalities.


Changing your account settings

Sign in issues

Managing your account

Upgrading to a Premium plan

Billing for Premium Plans

Billing for Domains

Billing for Google Workspace Business Emails

Managing your subscriptions

Charges, payments and tax

Invoices for Wix services

Using vouchers and promotions

Billing & premium subscriptions

Review your account settings, manage your subscriptions and plans and understand your invoices.

Account & billing

Manage subscriptions, plans and invoices.

Managing your site with the Wix app

Mobile apps basics

Customizing your own mobile app

Managing your own mobile app

Submitting your mobile app for approval

Building your own mobile app

Customizing your site on the Wix member apps

Managing your site on the Wix member apps

Using mobile apps as a member

Using the Wix member apps

Mobile apps for your customers

Use our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch. 

Using the Wix mobile apps

Run your business and connect with members.

Domain basics

Wix domains

Domains purchased elsewhere

Transferring domains

Managing domains

Troubleshooting domains

Follow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.

Connecting a domain

Learn to purchase, connect or transfer a domain to your site.

Setting up your store

Managing products and categories

Setting up shipping & fulfillment

Setting up payment and checkout

Designing your store

Managing your orders

Managing store inventory

Managing the Members Area

Managing store emails

Promoting stores sales

Dropshipping with Wix Stores

Setting up sales channels

Using the Wix app for Wix Stores

Wix Stores

Setting up Wix Bookings

Creating your services

Managing your staff

Managing your calendar & bookings

Memberships, packages & payments

Customizing Wix Bookings pages

Emails, SMS, and promotions

Using the Wix app to manage your bookings

Video conferencing with Wix Bookings

Fit by Wix

Inquiry Services

Wix Bookings

Setting up Wix Events

Creating your event

Designing Wix Events

Managing your events

Managing your guests

Selling event tickets

Promoting your event

Using the Wix app for Wix Events

Check-in by Wix for Events

Wix Events

Setting up Pricing Plans

Creating your plans

Selling Subscriptions on Your Wix Website

Business solutions & apps

Get tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.

Managing your business

Get tools to grow your business and web presence.