# Slideshow

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The slideshow allows multiple slides to display with images and optional text. This section allows you to add a slideshow in full width or grid. There are many options available similar to the slideshow, as you can see in the below screenshot:

{% hint style="info" %}

**Recommendation Size**\
Slideshow image desktop size: 1050x500\
Slideshow image mobile size: 767x767
{% endhint %}

You can add a slideshow section to display a carousel of images on a page in your store.

<table><thead><tr><th width="252">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in the Slideshow section is as follows:</p><ul><li>Wide</li><li>Container</li></ul></td></tr><tr><td>Enable center slide</td><td>Enable this checkbox to show center slide of this section. </td></tr><tr><td>Slide height</td><td><p>Customization of the "Slide height" in the Slideshow section is as follows:</p><ul><li>Adapt to first image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Carousel</td><td><p><strong>Transition effect</strong> </p><p>Customization of the "Transition effect" in the Slideshow section is as follows:</p><ul><li>Slide</li><li>Cards</li><li>Coverflow</li></ul><p><strong>Enable loop</strong></p><p>Enabling loop will result in the slides continuously looping. <br><br><strong>Enable autoplay</strong></p><p>Enable this checkbox to automatically rotate the images in the slideshow. </p><p></p><p><strong>Autoplay interval</strong> </p><p>Use the bar to set the auto-rotate time of the slideshow. You can set a minimum of “3” seconds and a maximum of “9” seconds.  </p></td></tr><tr><td>Navigation</td><td><p><strong>Enable arrows</strong> </p><p>Enable this checkbox to show slider arrow in this section. </p><p>  </p><p><strong>Disable arrows in mobile</strong> </p><p>Enable this checkbox to hide slider arrow in mobile view of this section.              </p><p></p><p><strong>Background color</strong> </p><p>You can customize the background color of the  navigation by using the color option. </p><p></p><p><strong>Foreground color</strong>  </p><p>You can customize the foreground color of the  navigation by using the color option. </p></td></tr><tr><td>Pagination</td><td><p><strong>Position</strong> </p><p>Customization of the "Position" in the Slideshow section is as follows:</p><ul><li>Over the image</li><li>Below the image </li></ul><p><strong>Style</strong> </p><p>Customization of the "Style" in the Slideshow section is as follows:</p><ul><li>None</li><li>Dots</li><li>Bars</li><li>Counter</li><li>Numbers </li></ul><p><strong>Background color</strong> </p><p>You can customize the background color of the  Pagination by using the color option. </p><p></p><p><strong>Foreground color</strong>  </p><p>You can customize the foreground color of the  Pagination by using the color option. </p></td></tr><tr><td>Animations</td><td><p>Customization of the "Image behavior" in the Slideshow section is as follows:</p><ul><li>None</li><li>Ambient movement</li></ul><p>By employing the Ambient movement feature, the slider images will exhibit motion.</p></td></tr><tr><td>Mobile layout</td><td>By enabling this checkbox, you can view the slide content below the image in a mobile device.</td></tr><tr><td>Accessibility</td><td>Describe the slideshow for customers using screen readers.</td></tr></tbody></table>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FEragt8DxuxzVE5b4fxJc%2FSlideshow.png?alt=media&#x26;token=76aea991-8e22-44f9-9058-04684dc1b87f" alt=""><figcaption></figcaption></figure>

## Add Slide

To add slides to the slideshow section, click on the 'Add Slide'. There are many options available similar to the slideshow, as you can see in the below points and screenshot:

<table data-full-width="false"><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Slide</td><td><p><strong>Image</strong> </p><p>Use "Image" to add the image to the slide. </p><p></p><p><strong>Mobile image</strong> </p><p>Use "Mobile image" to add the mobile image to the section. this is optional because it will take desktop image when mobile image will not be added.</p></td></tr><tr><td>Subheading</td><td><p><strong>Text</strong> </p><p>Enter the text you would like to display as a sunheading before the slide's heading.</p><p></p><p><strong>Size</strong> </p><p>Customization of the "Subheading size" in the slide is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large </li></ul></td></tr><tr><td>Heading</td><td><p><strong>Text</strong> </p><p>Enter text to display as a title in the slide. </p><p></p><p><strong>Size</strong> </p><p>Customization of the "Heading size" in the slide is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large </li></ul><p><strong>Show border below the heading</strong> </p><p>Enable this checkbox to show border below the slide heading of this slide.</p></td></tr><tr><td>Description</td><td><p><strong>Text</strong> </p><p>Enter the text you would like to display as a description of the slide. </p><p></p><p><strong>Size</strong> </p><p>Customization of the "Description text size" in the slide is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large </li></ul></td></tr><tr><td>Button </td><td><p><strong>Label</strong> </p><p>Use "Label" to add a label to the Button in the slide. </p><p></p><p><strong>Show arrow</strong> </p><p>Enable this checkbox to show arrow in button slide of this slide. </p><p></p><p><strong>Link</strong> </p><p>Use "Button link" to add a link to the Button in the slide.  </p><p></p><p><strong>Style</strong> </p><p>Customization of the "Button style" in the slide is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the slide, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the slide is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you have the option to modify the background and foreground colors of a slide's content container using the provided color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Mobile content alignment</strong></p><p>Customization of "Mobile content alignment" in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right </li></ul><p><strong>Content position on bottom</strong> </p><p>Enable this checkbox to show the slide content below the image in mobile view.</p></td></tr></tbody></table>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FPG4gt9yGz2sQxb3X53Pr%2Fslideshow-block.png?alt=media&#x26;token=723e5a73-f4e3-4c44-8490-178571f81a05" alt=""><figcaption></figcaption></figure>