On this page
For advanced snippets such as gallery or carousel/slider, it is desirable that the users can add more items or delete them as they wish. To support adding more items, snippet designers should indicate in their snippet which elements should be cloned whenever the users choose to add a new item, those elements should have a class name "sg-editor-template".
For the carousel snippet, if a new slide is added, the following elements should be cloned and appended next to the original elements. They should have "sg-editor-template" added as a class. Also, it is recommended to choose the last element in a set of elements as the one to be cloned.
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3" class="sg-editor-template" ></button>
<div class="carousel-item sg-editor-template">
<img src="https://picsum.photos/800/200?sig=3" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
If your snippet has a class indicator for the current active element like the Bootstrap carousel snippet, when the to-be-cloned-element is active, there will be two active elements after cloning. This is not desirable and we need to add attributes to the to-be-cloned-element to assist SiteGUI editor to remove the active class from the cloned one. The attributes should be added are data-sg-active-selector to specify the CSS selector value to look for the active element and data-sg-active-class to specify the active class name.
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3" class="sg-editor-template" data-sg-active-selector="button" data-sg-active-class="active"></button>
The to-be-cloned-element also has some numerical references, i.e: data-bs-slide-to="2" aria-label="Slide 3". The cloned element should change these values by incrementing them (one of the reason why we choose the last element in the set as the to-be-cloned-element).
We will add attribute data-sg-change to the to-be-cloned-element, the value should be the referencing attributes separated by commas. Optionally, we can specify the increment data-sg-increment the cloned element should use to increase the numerical values (default 1)
Finally, we have the following code for the to-be-cloned-element.
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" data-sg-change="data-bs-slide-to, aria-label" data-sg-increment="1" aria-label="Slide 3" class="sg-editor-template" data-sg-active-selector="button" data-sg-active-class="active"></button>
Similarly, the other to-be-cloned-element is also modified accordingly.
<div class="carousel-item sg-editor-template" data-sg-active-selector=".carousel-item" data-sg-active-class="active">
<img src="https://picsum.photos/800/200?sig=3" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
Obviously, what can be added should be removable. SiteGUI editor allows you to choose which element to attach the delete button by adding "sg-editor-removable" class to that element, only one delete button is needed for all to-be-cloned-elements, SiteGUI will remove all of them as long as they are in similar order. It is recommended to choose images or title/heading elements to attach delete button.
For the carousel snippet, we will attach delete buttons to the slides' image. When the snippet is edited, each image will have a delete button and clicking on it will remove both the image, caption and indicator for that slide.
<img src="https://picsum.photos/800/200?sig=1" class="d-block w-100 sg-editor-removable" alt="...">
<img src="https://picsum.photos/800/200?sig=2" class="d-block w-100 sg-editor-removable" alt="...">
<img src="https://picsum.photos/800/200?sig=3" class="d-block w-100 sg-editor-removable" alt="...">
and we have the final version for our carousel snippet as follows.
<div id="carouselExampleCaptions" data-sg-id-ref="data-bs-target" class="sg-block-content carousel carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" data-sg-change="data-bs-slide-to, aria-label" data-sg-increment="1" aria-label="Slide 3" class="sg-editor-template" data-sg-active-selector="button" data-sg-active-class="active" ></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/800/200?sig=1" class="d-block w-100 sg-editor-removable" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/200?sig=2" class="d-block w-100 sg-editor-removable" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item sg-editor-template" data-sg-active-selector=".carousel-item" data-sg-active-class="active">
<img src="https://picsum.photos/800/200?sig=3" class="d-block w-100 sg-editor-removable" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>