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.
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
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
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
<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('#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'
});
/* 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;
}