THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline

#1 mettre un double carousel

(23-11-2019 09:07:36)


bonjour, j'utilise le carousel sur mon site, est il possible de doubler le module pour avoir deux carousel différents ? merci

Offline


Sur la même page ?


OpenStudio Toulouse

Offline


Bonjour Oui sur la meme page l'un en haut et l'autre  en bas merci

Offline


Tu ne peux pas vraiment "dupliquer" le module, mais avec Thelia, tu peux fabriquer un carousel très facilement. Voilà la méthode :

Tu crée un contenu, et tu lu attaches des images. Si tu veux une URL sur les images, tu les place dans le champ "résumé" des images. Tu peux utiliser le champ titre et le champ description de l'image.

Ensuite, tu prends le code qui se trouve dans le fichier local/modules/Carousel/templates/frontOffice/default/carousel.html, en l'adaptant comme suit (id_de_ton_contenu est l'ID du contenu) :

{ifloop rel="carousel.front"}
<section class="carousel-container">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-wrapper">
            <div class="carousel-inner">
                {loop type="image" content=id_de_ton_contenu name="carousel.front" width="1200" height="390" resize_mode="borders"}
                <figure class="item {if $LOOP_COUNT == 1}active{/if}">
                    {if $CHAPO}<a href="{$CHAPO|default:'#'}">{/if}
                    <img src="{$IMAGE_URL}" alt="{$ALT}">
                    {if $URL}</a>{/if}

                    <div class="carousel-caption">
                        {if $TITLE}<h3>{$TITLE}</h3>{/if}
                        {if $DESCRIPTION}{$DESCRIPTION nofilter}{/if}
                    </div>
                </figure>
                {/loop}
            </div>
        </div>
        <a class="left carousel-control" href="#carousel" data-slide="prev"><span class="icon-prev"></span></a>
        <a class="right carousel-control" href="#carousel" data-slide="next"><span class="icon-next"></span></a>
    </div>
</section><!-- #carousel -->
{/ifloop}

Tu colles ensuite ce bloc de code à l'endroit où tu veux qu'il apparaisse.


OpenStudio Toulouse

Offline


merci je vais tester smile