Slick Slider

Slick Slider Stage

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button
<div class="slick-slider slider--stage" data-slick='{"dots": true}'> <div class="slide" style="background-image:url('/images/placeholder.jpg')"> <div class="slide-body"> <h2 class="headline">Headline</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class="btn btn-primary"> Button </a> </div> </div> <div class="slide" style="background-image:url('/images/placeholder.jpg')"> <div class="slide-body"> <h2 class="headline">Headline</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class="btn btn-primary"> Button </a> </div> </div> <div class="slide" style="background-image:url('/images/placeholder.jpg')"> <div class="slide-body"> <h2 class="headline">Headline</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class="btn btn-primary"> Button </a> </div> </div> </div>

Slick Slider Teaser

<div class="slick-slider slider--widget-teaser" data-slick='{"dots": true, "slidesToShow": 1, "centerMode": false, "variableWidth": false, "responsive":[{"breakpoint": 768, "settings":{"slidesToShow":1} }]}'> <div> <div class="slide-container"> <div class="widget-product-promotion"> <div class="widget-product-promotion__image-container"> <a href="#"> <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22320%22%20viewBox%3D%220%200%20400%20320%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2264%22%20dy%3D%2225%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E400%20%26%23215%3B%20320%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""> </a> </div> <div class="widget-product-promotion__body"> <a href="#"> <h2 class="widget-product-promotion__headline">Brother Adress-Etiketten DK- 11201 standard capacity 11201 weiß</h2> </a> <a class="btn btn-primary"> Button </a> </div> </div> </div> </div> <div> <div class="slide-container"> <div class="widget-product-promotion"> <div class="widget-product-promotion__image-container"> <a href="#"> <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22320%22%20viewBox%3D%220%200%20400%20320%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2264%22%20dy%3D%2225%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E400%20%26%23215%3B%20320%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""> </a> </div> <div class="widget-product-promotion__body"> <a href="#"> <h2 class="widget-product-promotion__headline">Brother Adress-Etiketten DK- 11201 standard capacity 11201 weiß</h2> </a> <a class="btn btn-primary"> Button </a> </div> </div> </div> </div> <div> <div class="slide-container"> <div class="widget-product-promotion"> <div class="widget-product-promotion__image-container"> <a href="#"> <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22320%22%20viewBox%3D%220%200%20400%20320%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2264%22%20dy%3D%2225%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E400%20%26%23215%3B%20320%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""> </a> </div> <div class="widget-product-promotion__body"> <a href="#"> <h2 class="widget-product-promotion__headline">Brother Adress-Etiketten DK- 11201 standard capacity 11201 weiß</h2> </a> <a class="btn btn-primary"> Button </a> </div> </div> </div> </div> <div> <div class="slide-container"> <div class="widget-product-promotion"> <div class="widget-product-promotion__image-container"> <a href="#"> <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22320%22%20viewBox%3D%220%200%20400%20320%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2264%22%20dy%3D%2225%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E400%20%26%23215%3B%20320%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""> </a> </div> <div class="widget-product-promotion__body"> <a href="#"> <h2 class="widget-product-promotion__headline">Brother Adress-Etiketten DK- 11201 standard capacity 11201 weiß</h2> </a> <a class="btn btn-primary"> Button </a> </div> </div> </div> </div> <div> <div class="slide-container"> <div class="widget-product-promotion"> <div class="widget-product-promotion__image-container"> <a href="#"> <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22320%22%20viewBox%3D%220%200%20400%20320%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2264%22%20dy%3D%2225%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E400%20%26%23215%3B%20320%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""> </a> </div> <div class="widget-product-promotion__body"> <a href="#"> <h2 class="widget-product-promotion__headline">Brother Adress-Etiketten DK- 11201 standard capacity 11201 weiß</h2> </a> <a class="btn btn-primary"> Button </a> </div> </div> </div> </div> <div> <div class="slide-container"> <div class="widget-product-promotion"> <div class="widget-product-promotion__image-container"> <a href="#"> <img src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22320%22%20viewBox%3D%220%200%20400%20320%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2264%22%20dy%3D%2225%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E400%20%26%23215%3B%20320%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""> </a> </div> <div class="widget-product-promotion__body"> <a href="#"> <h2 class="widget-product-promotion__headline">Brother Adress-Etiketten DK- 11201 standard capacity 11201 weiß</h2> </a> <a class="btn btn-primary"> Button </a> </div> </div> </div> </div> </div>