Intégrer un carousel/slider sur votre marketplace

Il vous est possible d'intégrer différents component HTML sur votre marketplace.

Parmi ces éléments, vous pouvez afficher un carousel (aussi appelé slider ou slideshow) à l'emplacement de votre choix sur le site. Pour intégrer un carousel sur l'une des pages de votre marketplace, voici un exemple de code sur lequel vous pouvez vous appuyer.

Comment intégrer un carousel

Étape 1

Voici le code HTML à coller dans l'éditeur de texte de la page ou de l'espace sur lequel vous souhaitez intégrer le carousel. Ce code permet de définir la structure de votre carousel. Vour pouvez compléter cette structure avec les éléments de votre choix. 
Assurez-vous de coller ce code HTML (dans le mode "Source code" de l'éditeur)
<section id="home-slider">
    <div class="container">
        <div class="lazy slider slick-initialized slick-slider">
            <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Prec</button>
            <div class="slick-list draggable">
                <div class="slick-track" style="opacity: 1; width: 1925px; transform: translate3d(-770px, 0px, 0px);">
                    <div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 385px;" tabindex="-1">
                        <div>
                            <div class="row" style="width: 100%; display: inline-block;">
                                <div class="col-md-4">
                                    <img alt="" class="" style="opacity: 1;" src="https://cdn.kreezalid.com/kreezalid/544350/files/985146/woman_2_5bc21cea449d3.jpg">
                                </div>
                                <div class="col-md-7">
                                    <span class="name">Adeline Lopez, Couturière</span>
                                    <ul class="list-inline">
                                        <li><em class="material-icons">star</em></li>
                                        <li><em class="material-icons">star</em></li>
                                        <li><em class="material-icons">star</em></li>
                                        <li><em class="material-icons">star</em></li>
                                        <li><em class="material-icons">star</em></li>
                                    </ul>
                                    <span class="comment"><strong>Lorem Ispum dolem santi</strong> Cras vel facilisis libero, volutpat vehicula nisl. Integer facilisis libero massa, nec sodales nunc mollis id. Nulla dapibus, mauris ac lobortis tristique, mauris odio venenatis magna, eget luctus nunc eros ultricies magna. Praesent vitae malesuada nibh. Sed varius ac neque in condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur ac augue id dolor pretium fringilla sit amet in arcu. Sed fermentum vitae neque vel viverra.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slick-slide" data-slick-index="0" aria-hidden="true" style="width: 385px;" tabindex="-1"><div>
                        <div class="row" style="width: 100%; display: inline-block;">
                            <div class="col-md-4">
                                <img alt="" class="" style="opacity: 1;" src="https://cdn.kreezalid.com/kreezalid/544350/files/985146/woman.jpg">
                            </div>
                            <div class="col-md-7">
                                <span class="name">Camille Legrand, Couturière</span>
                                <ul class="list-inline">
                                    <li><em class="material-icons">star</em></li>
                                    <li><em class="material-icons">star</em></li>
                                    <li><em class="material-icons">star</em></li>
                                    <li><em class="material-icons">star</em></li>
                                    <li><em class="material-icons">star</em></li>
                                </ul>
                                <span class="comment"><strong>Lorem Ispum dolem santi</strong> Cras vel facilisis libero, volutpat vehicula nisl. Integer facilisis libero massa, nec sodales nunc mollis id. Nulla dapibus, mauris ac lobortis tristique, mauris odio venenatis magna, eget luctus nunc eros ultricies magna. Praesent vitae malesuada nibh. Sed varius ac neque in condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur ac augue id dolor pretium fringilla sit amet in arcu. Sed fermentum vitae neque vel viverra.</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Suiv</button>
        </div>
    </div>
</section>

Étape 2

Voici le code à coller dans CSS Personnalisé pour personnaliser l'apparence de votre carousel :

#home-slider {
float: left;
width: 100%;
background: #6bc3ff;
}
 
.slider {
margin: 100px auto;
}
 
#home-slider img {
width: 150px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
 
#home-slider .name {
font-weight: 500;
color: #fff;
font-size: 2.3rem;
display: block;
}
 
#home-slider .comment {
font-size: 1.2rem;
color: #fff;
display: block;
}
 
#home-slider .list-inline>li {
display: inline-block;
padding-left: 0px;
padding-right: 0px;
}
 
#home-slider .material-icons {
color: #FFEB3B;
}
 
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

Étape 3

Voici le code Javascript qui va permettre le défilement automatique des slides. Il est à coller dans thème / JS personnalisé.

$(document).ready(function(){

$(".lazy").slick({
autoplay: true,
autoplaySpeed: 3500,
infinite: true
});
});

Le résultat attendu sur votre marketplace :

Il existent également d'autres ressources utiles sur ce sujet :