carousel in publication page

[ygalanak]

Is it possible to have a carousel of pictures (e.g. of figures) on a publication page and pictures saved in the same folder as the index.md of the publication?

[gcushen]

It's possible to add a gallery to any page and the gallery has a slideshow option (similar to carousel): https://wowchemy.com/docs/writing-markdown-latex/#image-gallery

[ygalanak]

sounds like a great idea - thanks!

[ygalanak]

Actually, how can I activate the slideshow option? I fail to see it on the documentation

[jpmorr]

Actually, how can I activate the slideshow option? I fail to see it on the documentation

Did you ever figure this out? The linked documentation page is missing now.

[ygalanak]

I only managed to work around it with a not that efficient solution. I created a folder layouts\shortcodes in which the gallery-slider.html file exists (see code below). Then i call this shortcode in the .md file of the publication.

`{{ $.Scratch.Add "width" (.Get "width" | default "500px") }}
{{ $.Scratch.Add "height" (.Get "height" | default "300px") }}
{{ $.Scratch.Add "auto-slide" (.Get "auto-slide" | default "0") }}

{{ $.Scratch.Add "arrow-left" (.Get "arrow-left" | default "fa-chevron-left") }}
{{ $.Scratch.Add "arrow-right" (.Get "arrow-right" | default "fa-chevron-right") }}

{{ if ne (.Get "no-fa") "true" }}

{{end}}

{{ if ne (.Get "no-jquery") "true" }}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
  {{end}}


<style>
  #slide-window {
  position: relative;
width: {{ $.Scratch.Get "width" }};
height: {{ $.Scratch.Get "height" }};
overflow: hidden;
top: 0px;
left: 0px;
}

#slides-list {
width: {{ $.Scratch.Get "width" }};
height: {{ $.Scratch.Get "height" }};
position: absolute;
margin: 0px;
padding: 0px;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
transition: all 0.66s ease;
-webkit-transition: all 0.66s ease;
}

.slide {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
width: {{ $.Scratch.Get "width" }};
height: {{ $.Scratch.Get "height" }};
background: #ccc;
text-align: center;
line-height: 100%;
background-size: cover;
background-position: 100% 100%;
color: #fff;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-transform-style: preserve-3d;
}

.nav {
position: relative;
z-index: 9;
top: 45%;
cursor: pointer;
color: #fff;
opacity: 0.7;
transition: all 0.66s ease;
-webkit-transition: all 0.66s ease;
}

.nav:hover {
opacity: 1.0;
}

#left {
left: 3%;
float: left;
}

#right {
right: 3%;
float: right;
}
</style>

<!-- Gallery -->
<div id="slide-window">
  <ol id="slides-list">
    {{- with (.Get "dir") -}}
  {{- $files := readDir (print "/static/" .) }}
  {{- range $files -}}
  {{- $absoluteUrl := print ($.Get "dir") "/" .Name | absURL }}
  <li class="slide" style="background-image:url({{ $absoluteUrl }});"></li>
    {{- end }}
  {{- end }}
  </ol>
    <span class="nav fa {{ $.Scratch.Get "arrow-left" }} fa-3x" id="left"></span>
      <span class="nav fa {{ $.Scratch.Get "arrow-right" }} fa-3x" id="right"></span>
        </div>

        <script>
        sliderJQuery = jQuery.noConflict();
        sliderJQuery(function( $ ) {
          $.global = new Object();
          $.global.total = 0;

          $(document).ready(function () {
            var slideWindowWidth = $('#slide-window').width();
            var slideCount = $('#slides-list li').length;
            var totalSlidesWidth = slideCount * slideWindowWidth;

            $.global.item = 0;
            $.global.total = slideCount;

            $('.slide').css('width', slideWindowWidth + 'px');
            $('#slides-list').css('width', totalSlidesWidth + 'px');

            $('#left').click(function () {
              resetAutoSlide();
              performSlide('back');
            });

            $('#right').click(function () {
              resetAutoSlide();
              performSlide('forward');
            });

          });

          function performSlide(direction) {
            if (direction == 'back') {
              var nextSlideId = $.global.item - 1;
            }
            if (direction == 'forward') {
              var nextSlideId = $.global.item + 1;
            }

            if (nextSlideId == -1) {
              /* At first position and requesting 'back' -> Go to last item */
                moveCss($.global.total - 1);
            } else if (nextSlideId == $.global.total) {
              /* At last position and requesting 'forward' -> Go to first item */
                moveCss(0);
            } else {
              /* Move to requested item */
                moveCss(nextSlideId);
            }
          }

          function moveCss(nextSlideId) {
            var slideWindowWidth = $('#slide-window').width();
            var margin = slideWindowWidth * nextSlideId;

            $('#slides-list').css('transform', 'translate3d(-' + margin + 'px,0px,0px)');

            $.global.item = nextSlideId;
          }

          {{ if ne (.Get "auto-slide") "0" }}
          var autoSlide = parseInt({{ $.Scratch.Get "auto-slide" }}, 10);
          var autoSlideInterval;
          function resetAutoSlide(){
            if(autoSlide) {
              if(autoSlideInterval) {
                clearInterval(autoSlideInterval);
              }
              autoSlideInterval = setInterval(function(){
                performSlide('forward');
              }, autoSlide)
            }
          }
          resetAutoSlide();

          {{- end }}
        });
        </script>

`