Can a carousel item be a link?

[mcbergsma]

Is there a URL option for each carousel item? To direct the visitor to a specific page?

[GeorgeWL]

You can try adding it as a pull for sure

[NetworkSeb]

I've just implemented this myself after a bit of searching.

If you want to do it yourself you can do the following.

Get the carousel patrial from here:

https://github.com/devcows/hugo-universal-theme/blob/master/layouts/partials/carousel.html

and add it to your site under the partials directory (if it's not there already)

Update the caousel.html above to include an item from the markdown (I called mine .href) (As below)

{{ if default true .Site.Params.CarouselHomepage.enable }}
{{ if gt (len .Site.Data.carousel) 0 }}
<section>
    <div class="home-carousel">
        <div class="dark-mask"></div>
        <div class="container">
            <div class="homepage owl-carousel"
                data-autoplay="{{ default true .Site.Params.CarouselHomepage.auto_play }}"
                data-slide-speed="{{ default 2000 .Site.Params.CarouselHomepage.slide_speed }}"
                data-pagination-speed="{{ default 1000 .Site.Params.CarouselHomepage.pagination_speed }}">
                {{ range sort .Site.Data.carousel "weight" }}
                <div class="item">
                    {{ if .href }}
                    <a href="{{ .href }}">
                    {{ end }}
                        <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>
                    {{ if .href }}
                    </a>
                    {{ end }}
                </div>
                {{ end }}
            </div>
            <!-- /.project owl-slider -->
        </div>
    </div>
</section>
{{ end }}
{{ end }}

Then add the href item to your markdown:

weight: 1
title: "Foobar"
description: >
    HTMbLah
image: "img/blah.png"
href: "https://www.github.com"

Hope this helps!

[ryanfox1985]

closed by #343