KU standard template with left menu and slideshow

Caption tekst 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.

Caption tekst 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.

Caption tekst 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.

Code to display slideshow

HTML

  <div class="slide-gallery">
  <a href="#" class="slide-link">
    <img src="https://picsum.photos/825/450?image=1" alt="">
    <div class="caption">
      <h2>Caption tekst 1</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.</div>
    </div>
  </a>
  <a href="#" class="slide-link">
    <img src="https://picsum.photos/825/450?image=2" alt="">
    <div class="caption">
      <h2>Caption tekst 2</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.</div>
    </div>
  </a>
  <a href="#" class="slide-link">
    <img src="https://picsum.photos/825/450?image=3" alt="">
    <div class="caption">
      <h2>Caption tekst 3</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.</div>
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=4" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=5" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=6" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=7" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=8" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=9" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=10" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=12" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=13" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=14" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=15" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=16" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=17" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=18" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://picsum.photos/825/450?image=19" alt="">
    </div>
  </a>
</div>
<!-- Navigation small images -->
<div class="gallery-nav">
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=1" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=2" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=3" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=4" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=5" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=6" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=7" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=8" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=9" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=10" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=12" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=13" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=14" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=15" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=16" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=17" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=18" alt="">
  </div>
  <div class="nav-item">
    <img src="https://picsum.photos/825/450?image=19" alt="">
  </div>
</div>

Script

<script src="https://cms.ku.dk/bootstrap/assets/js/slider/slick.min.js"></script>
<script>
$(function () {
  var $slideshow = $('.slideshow');
  $slideshow.on('init', function (event, slick) {
    if (slick.slideCount > 1 && slick.options.autoplay === true) {
      $slideshow.append('<button class="slick-pause" type="button" aria-label="Play/Pause"><span class="glyphicon glyphicon-pause"></span></button>');
    }
  });
  $slideshow.slick({
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 1000,
    dots: true,
    fade: true,
    arrows: true
  });
  $('.slick-pause').on('click', function () {
    var $pause = $(this).find('.glyphicon');
    if ($pause.hasClass('glyphicon-pause')) {
      $slideshow.slick('slickPause');
      $pause.toggleClass('glyphicon-pause glyphicon-play');
    } else {
      $slideshow.slick('slickPlay');
      $pause.toggleClass('glyphicon-play glyphicon-pause');
    }
  });
});
</script>