THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

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

Offline


Hi! I am new user of Thelia 2 and I installed it but I am trying to make carousel (Default carousel) to cycle or start automatically when page loads.

But doesnt' work. I have to clic on one of the next or previous buttons and only then starts to cycle.

How can I make carousel start cycle automatically when frontpage loads?

Thanks in advance for any help!

Offline


Hi,

add

data-interval="5000"

in page carousel.html ligne 3

<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="5000">

doc bootstrap

Offline


ZZUUTT: Thanks for reply.

Do you mean this file:

local/modules/Carousel/templates/frontOffice/default/carousel.html

???

I tested to add that and doesn't work.

My code is:

{ifloop rel="carousel.front"}
<section class="carousel-container">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="5000">
        <div class="carousel-wrapper">
            <div class="carousel-inner">
                {loop type="carousel" name="carousel.front" width="1200" height="390" resize_mode="borders"}
                <!--{$LOOP_COUNT}-->
                <!--<figure class="item {if $LOOP_COUNT == 1}active{/if}">-->
                <figure class="item {if $LOOP_COUNT == 1}active{/if}">
                    {if $URL}<a href="{$URL|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}

What did I miss?

Thanks again!

Offline


yes if you use the default template

clear the cache

Offline


ZZUUTT:

I already cleared cache and still doesn't work  sad

Did you test it?

I don't know what to do

Thanks again for your help

Ramin

Offline


if you use a personnal template for the carousel
transfert the folder in
...\frontOffice\yourtemplate\modules\Carousel

as if you make an update your script is not affected

Here's my script, it works
after 5 seconds the image changes

{ifloop rel="carousel.front"}
<section class="carousel-container">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="5000">
        <div class="carousel-wrapper">
            <div class="carousel-inner">
                {loop type="carousel" name="carousel.front" width="1200" height="390" resize_mode="borders"}
                <figure class="item {if $LOOP_COUNT == 1}active{/if}">
                    {if $URL}<a href="{$URL|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}

Offline


ZZUUTT: Thank you very much. Now worked.  Again thanks for your help!

Ramin