Menu Close


Homepage Slick Slider

Solodev’s twist on a homepage slider is modern, responsive, and easy to implement. Based on Slick Slider by Ken Wheeler, this slider is agency tested and ready for your web project. The slider can be used out-of-the-box and includes innate responsive styling within a Bootstrap framework. Tested in Chrome, Firefox, and Edge.


For detailed instructions regarding implementing the slider, view Solodev’s Add a Hero Slider to your Homepage Using Slick Slider article.


Check out a working example on JSFiddle.


The slider uses simple and intuitive HTML with Bootstrap standards. Each slide is set in the markup below:

<div class="ct-header tablex item" data-background="images/slide1.jpg"> <div class="ct-u-display-tablex"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-md-8 col-lg-6 slider-inner"> <h1 class="big">Big Data. Realtime Insight.</h1> <p>Leverage your data and improve marketing and sales ROI.</p> <a class="btn btn-transparent btn-lg text-uppercase" href="">Learn More</a> </div> </div> </div> </div> </div> </div>


All CSS is included in slider.css


In addition to the slider-bg.js resource, the slider itself needs to be initialized with the following script:

<script> $(document).ready(function(){ $('.ct-slick-homepage').slick({ autoplay: true, autoplaySpeed: 3000, }); }); </script>

For a full list attributes you can use to customize your slider, visit Slick Slider by Ken Wheeler.

External Includes

The slider includes the following third-party resources:

<link href="" rel="stylesheet" type="text/css" /> <link href="" rel="stylesheet" /> <script src=""></script> <script src="" type="text/javascript"></script> <script src=""></script>
View Source Code
Posted in Development