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 -->