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 Subcontainer 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 Subcontainer 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 registreren 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 registrieren 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 Einstellungen 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
}
}
]
Automatisch 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;
}
Synchronisierungseffekt
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 Einstellungen angegeben werden, sonst wird natürlich kein Slide-Effekt erzielt.