Help me design a carousel

support
1

Hi everyone!

I’m trying to design a carousel for my site using the owl carousel (that came with the theme “creative-portfolio”), but I’m having problems trying to decide how to implement it.

I want that each picture has its title, alt and obviously the source. I imagine I can set it up in the data folder, I can use layouts to create the html, but how should I call it inside my .md page? should I create a shortcut for each carousel? I’m going with this problem around my head and I don’t realize how to design it?

Regards,

Eduardo Guzman

2

I think that the best way would be to call the carousel through a shortcode. Why use data?

You could also set up frontmatter parameters for the images that are called in the carousel shortcode.

And then just placing it in your content e.g. {{< owl-carousel >}} would give you the rendered carousel.

But why use a carousel in the first place? They kind of make sense for product pics these days. Nothing beats the default way of displaying images on a page, especially on mobile.

Also regarding carousel plugins. Owl kind of sucks. There are better ones out there like Slick Carousel or if you feel confident about ditching jQuery Lory.js

1 Like
3

I am trying the same thing. Putting an owl carousel into the creative portfolio theme.
But the items are displayed beneath each other not like a slider.
http://www.weltladen-greifswald.de/produkte/werbetafeln/

{{ if gt (len .Site.Data.werbetafelncarousel) 0 }}
<section>
            {{ range sort .Site.Data.werbetafelncarousel "weight" }}
            <div class="item">
                <div class="row">
                    <div class="col-sm-5 right">
                        <h1>{{ .title }}</h1>
                        {{ .description | safeHTML }}
                    </div>
                    <div class="col-sm-7">
                        <img class="img-responsive" src="{{ .image }}" alt="">
                    </div>
                </div>
            </div>
            {{ end }}
 </section>
{{ end }}