> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/glozin-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/glozin-theme/theme-sections/products-carousel.md).

# Products carousel

<figure><img src="/files/5KRLMcA5zH5Z7lgmFJ0N" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Products carousel**
3. **Save**
   {% endhint %}

## Section settings <a href="#products-carousel" id="products-carousel"></a>

### **Section header** and **general:**

**Section width:** You can choose among Fluid container, Full width, Stretch width for the banner layout.

**Color scheme:** Set text color and background color with preset scheme

<figure><img src="/files/JEv1647tQOYXhaTIi3Nu" alt=""><figcaption></figcaption></figure>

Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the font size.

<figure><img src="/files/1GWG8DBdVKW06I2AICBR" alt=""><figcaption></figcaption></figure>

### **Products settings**

Specify the quantity of products to display, the number of products per row, and the gap between two adjacent products.

<figure><img src="/files/u1Ok314eLQigHTV3OYMG" alt=""><figcaption></figcaption></figure>

### **Banner settings**

**Show banner**: Choose to display the banner on desktop; it will automatically be hidden on tablets and mobile devices.

**Sticky banner**: Make the banner sticky, allowing it to remain visible as the user scrolls.

**Width**: Set the width of the banner.

**Position**: Determine the position of the banner on the page.

**Banner link**: Assign a link for the banner that users can click to be directed to a specific page.

**Banner type**: Select the type of banner, choosing between an image or a video.

<figure><img src="/files/osLoFTNLfIaLA4cVwmTJ" alt=""><figcaption></figcaption></figure>

After choosing banner type, the appropriate media source will be utilized:

* **Image**: Choose an image to display as the banner.
* **Video URL**: Input a video URL to display a video on the banner.
* **Local Video**: Takes higher priority over the Video URL if both are provided.

<figure><img src="/files/yoIllK5jVKrAj2jFDmK8" alt=""><figcaption></figcaption></figure>

### **Carousel settings**

**Show Next/Back:** Display arrows to navigate to the next or previous item.

**Pagination:** Choose from different types of pagination options.

**Setup period time:** Configure the time interval for changing slides.

**Reveal next slide:** Allow a part of the next slide to be visible while the previous one is still displayed.

<figure><img src="/files/bwGAOnZf0lTzNGvwToKo" alt=""><figcaption></figcaption></figure>

### **Mobile options**

Specify the number of items displayed per row on mobile devices for an optimal viewing experience.

<figure><img src="/files/W0F4RYI0Vs3MRFVeaHHN" alt=""><figcaption></figcaption></figure>

### **Section padding**

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

<figure><img src="/files/9r3cNNqQHPAx0VNYdSoo" alt=""><figcaption></figcaption></figure>