$('.slick').each(function(){ var $this = $(this), $blockArrows = $('.controls-arrows', $this), $blockDots = $('.controls-dots', $this), $slick = $('.slider', $this); $slick.slick({ dots: true, arrows: true, slidesToShow: 3, slidesToScroll: 1, appendArrows: $blockArrows, appendDots: $blockDots }); });
.blue { padding-top: 1px; padding-bottom: 50px; } .slick { margin-left: 30px; margin-right: 30px; position: relative; } .slider { z-index: 5; } .controls { position: relative; z-index: 10; text-align: center; margin-top: -45px; } .controls-arrows, .controls-dots { text-align: center; position: relative; display: inline-block; vertical-align: middle; } .controls-dots .slick-dots { position: relative; bottom: auto; } .controls-arrows .slick-prev, .controls-arrows .slick-next { position: relative; left: auto; right: auto; display: inline-block; top: auto; transform: none; vertical-align: middle; } .controls-arrows .slick-prev:before, .controls-arrows .slick-next:before { color: #919191 } .slick-dotted.slick-slider { margin-bottom: 0px; }
<div class="blue"> <div class="slick"> <div class="slider"> <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> <div class="controls"> <div class="controls-arrows"><div class="controls-dots"></div></div> </div> </div> <div class="slick"> <div class="slider"> <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> <div class="controls"> <div class="controls-arrows"><div class="controls-dots"></div></div> </div> </div> <div class="slick"> <div class="slider"> <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> <div class="controls"> <div class="controls-arrows"><div class="controls-dots"></div></div> </div> </div> </div>