Responsive Vertical News Slider

Vertical News Slider is a jQuery and CSS3-based slider module that displays news headlines on the left along with a preview image and brief description on the right. The "current" item is highlighted and switches automatically at intervals.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/vertical.news.slider.css?v=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/vertical.news.slider.js"></script>

2. HTML

<div class="news-holder cf">

    <ul class="news-headlines">
      <li class="selected">100 red bicycles stolen from local bike store</li>
      <li>New leash laws in effect for floppy-eared dogs</li>
      <li>Insider: Can palm trees be saved?</li>
      <li>Fresh recipes to titillate the taste buds</li>
      <li>Truck inspections under way for the metropolitan area</li>
      <li>Are the beaches safe for swimming this year?</li>
      <!-- li.highlight gets inserted here -->
    </ul>

    <div class="news-preview">

      <div class="news-content top-content">
        <img src="http://cdn.impressivewebs.com/news1.jpg">
        <p><a href="#">100 red bicycles stolen from local bike store</a></p>

        <p>A hundred red bicycles were stolen from under our noses yesterday, and nobody knows what went wrong.</p>
      </div><!-- .news-content -->

      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news2.jpg">
        <p><a href="#">New leash laws in effect for floppy-eared dogs</a></p>

        <p>Ears on dogs can be a tricky thing. Find out more about this amazing story and why these dogs are a nuisance.</p>
      </div><!-- .news-content -->

      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news3.jpg">
        <p><a href="#">Insider: Can palm trees be saved?</a></p>

        <p>Ah, the palm tree. It feeds us, it shades us, it does whatever we ask. We should think about it more deeply.</p>
      </div><!-- .news-content -->

      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news4.jpg">
        <p><a href="#">Fresh recipes to titillate the taste buds</a></p>

        <p>Food is great. These recipes will make you appreciate food as if it were even greater than great. It will be super great.</p>
      </div><!-- .news-content -->

      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news5.jpg">
        <p><a href="#">Truck inspections under way for the metropolitan area</a></p>

        <p>The Sherrif's department has put out an APB on these trucks. You know, this is the kind of thing that only happens in small towns.</p>
      </div><!-- .news-content -->

      <div class="news-content">
        <img src="http://cdn.impressivewebs.com/news6.jpg">
        <p><a href="#">Are the beaches safe for swimming this year?</a></p>

        <p>Giant orange pedal boats have been spotted at various beaches. In this report we tell you some ridiculous precautions to take.</p>
      </div><!-- .news-content -->

    </div><!-- .news-preview -->
</div><!-- .news-holder -->