Bilder Slideshow erstellen

Um eine Slideshow in unser Theme zu integrieren, benötigen wir zunächst ein Markup. Wir benötigen einen Container für den Slider mit einer frei wählbaren Klasse sowie die Subcon­tainer mit den einzelnen Elementen. In diesem Beispiel gehen wir von folgender Struktur und dem Slider Slick aus.

Wir haben ein Seiten Template z.B. page.php in diesem wird der Container geöffnet. In diesem Container wird der Loop erzeugt. In diesem Loop wird der Subcon­tainer erzeugt. Also so viele <div> wie Inhalte gelooped werden. Also grob folgendes Schema:

<!-- page.php -->
<div class="container"><!-- In page.php -->
    <!-- Loop lädt content.php -->
        <div>Slider Element </div><!-- In content.php -->
    <!-- Ende des Loops -->
</div><!-- In page.php -->

CSS laden

Anschließend regis­treren wir die CSS Datei für den Slider in der functions.php

//Styles
add_action( 'wp_enqueue_scripts', 'ms_register_style' ); //Name kann frei gewählt werden
function ms_register_style() { //muss hier der Selbe sein
    //Laden der slick.css
    wp_register_style( 'slick', get_template_directory_uri() . '/css/slick.css');
    wp_enqueue_style( 'slick' );
}

JS laden

Danach regis­trieren wir das Javascript in der functions.php

//Scripts
add_action( 'wp_enqueue_scripts', 'ms_register_script' ); //Name kann frei gewählt werden
function ms_register_script() {
    //Laden der slick.js
    wp_register_script( 'slick', get_template_directory_uri() . '/js/slick.js', '', null, true); //true besagt, dass die Skripte im Footer eingebunden werden
    wp_enqueue_script( 'slick' );
}

Zusätzlich notieren wir folgendes JS inline vor dem </body> tag.

<script>
    jQuery(document).ready(function(){
        jQuery('.container').slick({
            //Einstellungen
        });
    });
</script>

Anstelle von Einstel­lungen können folgende Einträge gesetzt werden.

Mehrere Einträge

  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3

Responsive

  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]

Variable Breite

  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true

Adaptierte Höhe

  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true

Daten Atrribut Einstellungen

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

Zentriert

  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]

Automa­tisch abspielend

  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,

Mit sanftem Übergang

  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'

Ein-, Ausblendbar

  slidesToShow: 3,
  slidesToScroll: 3
});
$('.js-add-slide').on('click', function() {
  slideIndex++;
  $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});

$('.js-remove-slide').on('click', function() {
  $('.add-remove').slick('slickRemove',slideIndex - 1);
  if (slideIndex !== 0){
    slideIndex--;
  }

Filterbar

  slidesToShow: 4,
  slidesToScroll: 4
});

var filtered = false;

$('.js-filter').on('click', function(){
  if (filtered === false) {
    $('.filtering').slick('slickFilter',':even');
    $(this).text('Unfilter Slides');
    filtered = true;
  } else {
    $('.filtering').slick('slickUnfilter');
    $(this).text('Filter Slides');
    filtered = false;
  }

Synchro­ni­sie­rungs­effekt

  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true

Rechts nach Links

rtl: true

Achtung! Der Loop muss natürlich mehr Elemente ausgeben, als in den Slider Einstel­lungen angegeben werden, sonst wird natürlich kein Slide-Effekt erzielt.