News

Here's an example we created that you might use for displaying the latest posts or news items on your site. It uses HTML5 elements such as article. We've obviously styled the HTML inline content a little and have added media queries so the content doesn't become ridiculously large.

Boats by the bay

This summer there were, surprise surprise, boats on the bay! Often the sun will shine and when it's partially cloudy we get the 'God' or 'Holy Light' effect. It's pretty cool huh? I wonder what it's pointing to... treasure? Bitcoins?

read more
demo1_1

The winter is coming

And isn't it pretty? It's strange, people who live through heavy winters seem to want to get out of it as soon as possible, yet those who live in more temperate climates see snow and a 'real' winter as an amazing thing that must be experienced.

read more
demo1_1

In front of Versailles

The Palace of Versailles is pretty amazing, not just inside, but also the outside garden, where you'll find gardens like these sporting amazing ranges of flora.

read more
demo1_1

HTML Markup

<section id="news-demo">
  <article>
    <div class="text-content">
      <h2>Boats by the bay</h2>
      <p>This summer there were, surprise surprise, boats on the bay! Often the sun will shine and when it's partially cloudy we get the 'God' or 'Holy Light' effect. It's pretty cool huh? I wonder what it's pointing to... treasure? Bitcoins?</p>
      <a href="#!" class="button-link read-more">read more</a>
    </div>
    <div class="image-content"><img src="/assets/img/image-1.jpg" alt="demo1_1"></div>
  </article>
  <article>
    <div class="text-content">
      <h2>The winter is coming</h2>
      <p>And isn't it pretty? It's strange, people who live through heavy winters seem to want to get out of it as soon as possible, yet those who live in more temperate climates see snow and a 'real' winter as an amazing thing that must be experienced.</p>
      <a href="#!" class="button-link read-more">read more</a>
    </div>
    <div class="image-content"><img src="/assets/img/image-2.jpg" alt="demo1_1"></div>
  </article>
  <article>
    <div class="text-content">
      <h2>In front of Versailles</h2>
      <p>The Palace of Versailles is pretty amazing, not just inside, but also the outside garden, where you'll find gardens like these sporting amazing ranges of flora.</p>
      <a href="#!" class="button-link read-more">read more</a>
    </div>
    <div class="image-content"><img src="/assets/img/image-3.jpg" alt="demo1_1"></div>
  </article>
</section>

jQuery

jQuery('#news-demo').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="sy-box news-slider" />', // wrapper to wrap everything, including pager
  elements: 'article', // elments cointaining slide content

  // options
  adaptiveHeight: false, // height of the sliders adapts to current 
  captions: false,

  // pager
  pagerClass: 'news-pager',

  // transitions
  transition: 'horizontal', // fade, horizontal, kenburns, false
  speed: 1200,
  pause: 8000,

  // slideshow
  autoDirection: 'prev'
});

CSS (created by Sass)

/* News */
.news-slider {
  /* Style the actual content */
}
.news-slider .text-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 1em;
  width: 30%;
  height: 100%;
}
.news-slider .text-content h2 {
  margin: 0;
}
.news-slider .text-content p {
  margin: 1em 0;
}
.news-slider .text-content a.button-link {
  padding: 0.25em 0.5em;
  position: absolute;
  bottom: 1em;
  right: 1em;
}
.news-slider .image-content {
  line-height: 0;
}
.news-slider .image-content img {
  max-width: 100%;
}
.news-slider .news-pager {
  text-align: right;
  display: block;
  margin: 0.2em 0 0;
  padding: 0;
  list-style: none;
}
.news-slider .news-pager li {
  display: inline-block;
  padding: 0.6em;
  margin: 0 0 0 1em;
}
.news-slider .news-pager li.sy-active a {
  color: #31ace2;
}
.news-slider .news-pager li a {
  font-weight: 500;
  text-decoration: none;
  display: block;
  color: #222;
}
Out-of-the-box Pictures Portfolio News Shop Thumbnails CSS vs jQuery