Slider with thumbnails
How Do I?
Hi,
I hope someone can help me or point me in the right direction on how to build a bootstrap carousel slider with thumbnails using {ee} tags. I have the structure ready be I am not sure how to structure it with {ee} tags. This is for a product page where you have the main image and thumbnails. When you select the thumbnail the image display.
Thank you,
TO see the structure: structure image
<div id=”carouselExampleIndicators5” class=”carousel slide” data-ride=”carousel”> <div class=”carousel-inner”> <div class=”carousel-item active”> “class= </div> <div class=”carousel-item”> ” class= </div> <div class=”carousel-item”> ” class= </div> <div class=”carousel-item”> ” class= </div> <div class=”carousel-item”> ” class= </div> </div> </div>
<ol class=”carousel-indicators”> <li data-target=”#carouselExampleIndicators5” data-slide-to=”0” class=”active”> ” class= </li> <li data-target=”#carouselExampleIndicators5” data-slide-to=”1”> ” class=</li> <li data-target=”#carouselExampleIndicators5” data-slide-to=”2”>” class=</li> <li data-target=”#carouselExampleIndicators5” data-slide-to=”3”>” class=</li> <li data-target=”#carouselExampleIndicators5” data-slide-to=”4”>” class=</li> </ol>
Hi Jason, you can create a custom field, a Grid field for example, you can loop through it. The grid can contain image / caption for example.
<div id=”carousel-example-generic” class=”carousel slide” data-ride=”carousel”> <!– Indicators –> <ol class=”carousel-indicators”>
{grid_field}
<li data-target="#carousel-example-generic" data-slide-to="{grid_field:field_row_index}" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="{grid_field:field_row_index}"></li>
<li data-target="#carousel-example-generic" data-slide-to="{grid_field:field_row_index}"></li>
{/grid_field} </ol>
<!– Wrapper for slides –> <div class=”carousel-inner” role=”listbox”>
{grid_field}
<div class="item {if '{grid_field:field_row_index}' == '0'}active{/if}">
{grid_field:image_label}
<div class="carousel-caption">
{grid_field:image_caption}
</div>
</div>
{/grid_field}
</div>
<!– Controls –> _ _ Previous_ _ _ Next_ </div>