hugo-theme-introduction/layouts/projects/single.html

{{ define "main" }}
    <div class="container markdown top-pad">
        {{ with .Resources.ByType "image" }}
        <div class="has-text-centered">
            {{ $moreThenOneImage := gt (len .) 1 }}
            {{ if $moreThenOneImage }}
            <div class="owl-carousel owl-theme">
            {{ end }}
                {{ range sort . "Params.weight" }}
                    {{ $image := .Resize "1000x" }}
                    {{ if $moreThenOneImage }}
                    <div class="item owl-height">
                    {{ end }}
                        <img src="{{ $image.RelPermalink }}" class="img-responsive" alt="{{ $image.Name }}">
                    {{ if $moreThenOneImage }}
                    </div>
                    {{ end }}
                {{ end }}
            {{ if $moreThenOneImage }}
            </div>
            {{ end }}
        </div>
        {{ end }}
        {{ .Content }}
    </div>
    <!-- End post content -->
    <div class="disqus">
        {{ template "_internal/disqus.html" . }}
    </div>
{{ end }}

{{ define "customCSS" }}
{{ $owlCarousel := resources.Get "vendor/owlCarousel/owl.carousel.min.css" }}
{{ $owlCarouselTheme := resources.Get "vendor/owlCarousel/owl.theme.default.min.css" }}
{{ $owlCarouselBundle := slice $owlCarousel $owlCarouselTheme | resources.Concat "/css/owlCarousel.min.css" | fingerprint }}
<link rel="stylesheet" href="{{ $owlCarouselBundle.Permalink }}" integrity="{{ $owlCarouselBundle.Data.Integrity }}" media="screen">
{{ end }}

{{ define "customScripts" }}
{{ $owlCarousel := resources.Get "vendor/owlCarousel/owl.carousel.min.js" | fingerprint }}
<script src="{{ $owlCarousel.Permalink }}" integrity="{{ $owlCarousel.Data.Integrity }}"></script>
<script>
    $(document).ready(function(){
      $(".owl-carousel").owlCarousel({
          loop: true,
          nav: true,
          margin: 10,
          items: 1,
          autoHeight: true
      });
  });
</script>
{{ end }}