Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding a Realtime News Slider to Your Web Design Project

Using Slick Slider, we can add slider capabilities to a standard news module so your users can easily browse your most recent content

We’ve written before regarding the necessity of keeping your website audience well informed with either a blog or news module. An always important consideration, however, is how you are able to direct users to newly added content within the lifespan of a post’s marketing push. Clearly labeled news widgets featuring a handful of recent content can drive necessary traffic, particularly when added to high visibility areas such as a website’s homepage.

Yet, a reoccurring problem is how to maximize space within these modules/widgets while still presenting your users a plethora of options. One method to solve this problem is your turn your recent news module into a realtime slider. This allows users to see a number of news entries within a confined area.

Using Slick Slider, we can add slider capabilities to a standard news module. In this web design code tutorial, we will go through the process of creating this fully functional news slider. Enjoy!

Below is the HTML, CSS, and JavaScript required.

Step 1 - news-slider.html

Copy and paste the following code into news-slider.html

<div class="container">
  <div class="row">
    <div class="col-md-6 news-slider">
      <div class="slide">
        <div class="blogPost--small">
          <div class="media">
            <span class="pull-left"><a href="#"><span class="date"><span>29</span> <small>Mar</small></span></a></span>
            <div class="media-body">
              <h4 class="media-heading">
                <a href="#">Building In WebCorpCo CMS 8</a>
              </h4>
              <p>Learn about all of the possibilities of web design in our latest CMS release.</p>
            </div>
          </div>
        </div><!-- / blogPost -->
        <div class="blogPost--small">
        <div class="media">
          <span class="pull-left"><a href="#"><span class="date"><span>22</span> <small>Mar</small></span></a></span>
          <div class="media-body">
          <h4 class="media-heading">
            <a href="#">WebCorpCo Named To Inc. 5000</a>
          </h4>
          <p>Inc. magazine today ranked WebCorpCo as the 1,870th fastest growing company on the 34th annual Inc. 5000.</p>
        </div>
      </div>
    </div><!-- / blogPost -->
  </div><!-- / slide1 -->
  
  <div class="slide">
    <div class="blogPost--small">
      <div class="media">
        <span class="pull-left"><a href="#"><span class="date"><span>12</span> <small>Mar</small></span></a></span>
        <div class="media-body">
          <h4 class="media-heading">
            <a href="#">7 Critical Factors When Choosing A CMS</a>
          </h4>
          <p>Finding a solution that can be tailored to support the needs of your business is more important than ever.</p>
        </div>
      </div>
    </div><!-- / blogPost -->
    <div class="blogPost--small">
      <div class="media">
        <span class="pull-left"><a href="#"><span class="date"><span>10</span> <small>Mar</small></span></a></span>
        <div class="media-body">
          <h4 class="media-heading">
            <a href="#">What Is A Content Management System</a>
          </h4>
          <p>So many acronyms that most of us know a brief amount about, if at all, let alone the meaning of those three little letters we hear so often.</p>
          </div>
        </div>
      </div><!-- / blogPost -->
    </div><!-- / slide2 -->
    </div>
  </div>  
</div>

<div class="container newsNav">
  <div class="row">
    <div class="col-md-3">
      <a href="#" class="link-underline">See All News</a>
    </div>
    <div class="col-md-3 text-right">
      <button id="ct-js-district-calendar--prev" type="button" class="slick-arrow next"><img src="https://www.solodev.com/assets/news-slider/arrow-prev.jpg" alt="Previous"></button>
      <button id="ct-js-district-calendar--next" type="button" class="slick-arrow next"><img src="https://www.solodev.com/assets/news-slider/arrow-next.jpg" alt="Next"></button>
    </div>
  </div>
</div>

Step 2 - news-slider.css

Download the CSS below and include it in your web page

news-slider.css

Step 3 - news-slider.js

Copy and paste the code below into news-slider.js

$(document).ready(function(){
  $('.news-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 8000,
    arrows: true,
    prevArrow: $('.prev'),
    nextArrow: $('.next'),
    dots: false,
      pauseOnHover: false,
      responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 1
      }
    }]
  });
});

Step 4 - Add the following includes to your web page

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="news-slider.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="news-slider.js"></script>

Customize the above code to show as many news entries in a single slide as you want, the duration each slide shows for, and the overall width of the widget.

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev