Københavns Universitet

Nye rundvisninger i botanisk have
Alumnernes dag

Forskning. Samtaler. Festmiddag.
Bliv klogere på dit studievalg

Kom til åbent hus
Bliv klogere på dit studievalg

Kom til åbent hus
Bliv klogere på dit studievalg

Kom til åbent hus
Bliv klogere på dit studievalg

Kom til åbent hus

Code to display slideshow

Image format is 1100px x 600px.

HTML 
<div class="slideshow">
    <a href="#" class="slide-link">
        <img src="/bootstrap/images/placeholder_550x300.jpg" alt="">
        <div class="caption">
          <div>Københavns Universitet</div>
          <h2>Nye rundvisninger i botanisk have</h2>
        </div>
    </a>
    <a href="#" class="slide-link">
        <img src="/bootstrap/images/placeholder_550x300.jpg" alt="">
    </a>
    <a href="#" class="slide-link">
        <img src="/bootstrap/images/placeholder_550x300.jpg" alt="">
    </a>
    <a href="#" class="slide-link">
        <img src="/bootstrap/images/placeholder_550x300.jpg" alt="">
    </a>
  </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>