How to use blog slider
The page slider can be setup from app/js/src/script.js
. In this file you can customize these slider settings:
self.blogSlider.slick({
centerMode: true,
arrows: true,
infinite: true,
speed: 300,
speed: 500,
slidesToShow: 1,
adaptiveHeight: false,
centerPadding: '25%',
responsive: [{
breakpoint: 992,
settings: {
centerMode: false
}
}]
});
You can find more settings at http://kenwheeler.github.io/slick/
Also if you want to add more slider items, you will have to add a new div which contain the “dm__slider-item
” class inside your “dm__slider-blog
“.
This is how the blog slider markup looks like:
<div class="dm__slider-blog">
<a href="slider item url" class="dm__slider-item">
<div class="dm__slider-item-container">
<div class="row">
<div class="dm__slider-img-container">
<div class="dm__slider-blog-img" style="background-image: url('images/img_02.jpg')"></div>
</div>
<div class="dm__slider-caption">
<div class="dm__slider-caption-col">
<h3>Slider item title</h3>
<p>Slider item text</p>
</div>
</div><!--/.dm__slider-caption-->
</div><!-- /.row -->
</div><!--/. dm__slider-item-container -->
</a> <!-- dm-slider-item -->
<a href="slider item url" class="dm__slider-item">[...]</a> <!-- another slider item -->
<a href="slider item url" class="dm__slider-item">[...]</a> <!-- another slider item -->
<a href="slider item url" class="dm__slider-item">[...]</a> <!-- another slider item -->
</div> <!-- End blog slider -->