TransWikia.com

Simple way to create a slideshow with Twig and a for loop?

Craft CMS Asked by Miss Sunshine on December 3, 2020

I have this code, which is basically a loop in a Twig template where I show opinions:

<section class="opinions">
    <h2 class="opinions__title heading2">
        Opiniones de otros guardianes
    </h2>
    <ul class=" row md-12 center-md">
        <li class="col md-3">
        {% for opinion in opiniones %}
            <blockquote class="opinion__blq simple-bubble text-large">
                {{ opinion.opinion }}
            </blockquote>
            <p>
                {{ opinion.autor }}
            </p>
            <p>
                {{ opinion.ciudad }}
            </p>
        {% endfor %}
        </li>
    </div>
</section>

I’d like to create a simple slideshow to show these 3 opinions. I’ve tried with diferent methods but they don’t work. Does someone know a simple, easy way to do it? Thanks.

One Answer

This isn't really a Craft question. Craft is simply responsible for outputting the requested data into your template, and you can use whatever you'd like on the front end to display it.

What you want in this case is a JavaScript carousel or slider. You can build your own, or use a simple library. I like Flickity and use it often, but if you just do a Google search for "javascript carousel" you'll find tons of options to choose from. If you're using a specific library or framework for your site, you might want to include that like "javascript carousel bootstrap" or "javascript carousel react" to find something that leverages libraries you're already loading.

Answered by R.J. on December 3, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP