This tutorial offers a responsive slideshow using the jQuery Cycle2 plugin and some custom CSS.
Slideshows are great for “hero” sections and many other use cases in web design. As we cater to a growing number of screen sizes, it’s important to use a flexible and responsive slideshow solution. That’s why I use jQuery Cycle2 for most of my projects. It’s very easy to implement and offers a variety of custom configurations, which can be found on the jQuery Cycle2 site.
Let’s do this!
The HTML
Let’s start with the HTML. First, we’ll create a parent .slideshow container to use our own custom CSS targeting. Then we’ll add a .cycle-slideshow div with some custom data-attributes, which are part of jQuery Cycle2 and tell the slideshow how to handle slide containers, speed, and paging.
Next, we’ll create child .cycle-slide divs to hold each slide. This CSS class is important since jQuery Cycle2 uses them for it’s magic. Then within each slide we’ll have some HTML for a label, title and CTA button.
Lastly, we’ll add a .cycle-pager div for the slide pagination. Again, this is generated by jQuery Cycle2 so all we need is the open div.
<div class="slideshow">
<div class="cycle-slideshow" data-cycle-timeout="7500" data-cycle-speed="1000" data-cycle-pager=".cycle-pager" data-cycle-slides=".cycle-slide">
<div class="cycle-slide">
<img src="images/slide-image-001.jpg" />
<div class="slide-body">
<div class="slide-content">
<label class="content-label">The Beach</label>
<h2 class="content-title">New Zealand's Nelson area, found in the northern part of the south island, offers some exquisite beaches all year round...</h2>
<a href="#" class="content-btn">Learn more</a>
</div>
<!--/.slide-content-->
</div>
<!--/.slide-body-->
</div>
<!--/.cycle-slide-->
<div class="cycle-slide">
<img src="images/slide-image-002.jpg" />
<div class="slide-body">
<div class="slide-content">
<label class="content-label">Silver Fern</label>
<h2 class="content-title">Cyathea dealbata, also known as the silver tree-fern or silver fern, or as ponga or punga, is a species of medium-sized tree fern, endemic to New Zealand.</h2>
<a href="#" class="content-btn">Learn more</a>
</div>
<!--/.slide-content-->
</div>
<!--/.slide-body-->
</div>
<!--/.cycle-slide-->
<div class="cycle-slide">
<img src="images/slide-image-003.jpg" />
<div class="slide-body">
<div class="slide-content">
<label class="content-label">The Rainforest</label>
<h2 class="content-title">Explore the beautiful beach rainforests of northern New Zealand for breath-taking views.</h2>
<a href="#" class="content-btn">Learn more</a>
</div>
<!--/.slide-content-->
</div>
<!--/.slide-body-->
</div>
<!--/.cycle-slide-->
</div>
<!--/.cycle-slideshow-->
<div class="cycle-pager"></div>
</div>
<!--/.slideshow-->
The CSS
Below is the CSS we’ll use to style our slideshow. There are breakpoints at 1024 for tablet, 768 for mobile, and 600 for super mobile.
The major change is making the .slide-body stacked for super mobile, instead of overlaid on wider screen widths.
/* ---------- slideshow CSS ---------- */
.slideshow {
width: 100%;
padding: 0;
margin: 0;
}
/* cycle slide */
.slideshow .cycle-slide {
position: relative;
width: 100%;
max-height: 700px;
overflow: hidden;
background: #000;
}
.slideshow .cycle-slide img {
display: block;
width: 100%;
}
/* slide body */
.slideshow .cycle-slide .slide-body {
position: absolute;
width: 100%;
top: 25%;
z-index: 100;
opacity: 0;
margin-left: -50px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.slideshow .cycle-slide.cycle-slide-active .slide-body {
opacity: 1.0;
margin: 0;
}
/* slide content */
.slideshow .cycle-slide .slide-content {
width: 50%;
margin: 0 auto;
}
.slideshow .cycle-slide .slide-content .content-label {
position: relative;
display: inline-block;
padding: 15px 30px;
margin: 0;
background: #fff;
color: #333;
font-size: 1em;
font-weight: 700;
letter-spacing: 5px;
text-transform: uppercase;
}
.slideshow .cycle-slide .slide-content .content-title {
font-size: 2em;
font-weight: 300;
line-height: 1.2;
padding: 20px;
margin: 0 0 30px;
background: rgba(0, 0, 0, .5);
color: #fff;
}
.slideshow .cycle-slide .slide-content .content-btn {
display: inline-block;
padding: 12px 50px;
background: rgba(0, 0, 0, .25);
color: #fff;
font-size: 1.5em;
font-weight: 700;
border: 2px solid;
border-radius: 100px;
text-decoration: none;
}
.slideshow .cycle-slide .slide-content .content-btn:hover {
background: #fff;
color: #000;
border-color: #fff;
}
/* cycle pager */
.slideshow .cycle-pager {
padding: 30px 0;
background: #eee;
text-align: center;
z-index: 100;
}
.slideshow .cycle-pager span {
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
background: #ccc;
border-radius: 20px;
text-indent: -9999px;
cursor: pointer;
}
.slideshow .cycle-pager span:hover {
background: #666;
}
.slideshow .cycle-pager span.cycle-pager-active {
background: #000;
}
/* TABLET */
@media screen and (max-width: 1024px) {
.slideshow .cycle-slide .slide-content {
width: 90%;
}
}
/* MOBILE */
@media screen and (max-width: 768px) {
.slideshow .cycle-slide .slide-body {
top: 10%;
}
.slideshow .cycle-slide .slide-content {
width: 90%;
}
.slideshow .cycle-slide .slide-content .content-title {
font-size: 1.5em;
}
}
/* SUPER MOBILE */
@media screen and (max-width: 600px) {
.slideshow .cycle-slide .slide-body {
position: static;
padding: 30px;
}
.slideshow .cycle-slide .slide-content {
width: 100%;
min-height: 300px;
}
.slideshow .cycle-slide .slide-content .content-title {
background: #333;
font-size: 1.2em;
}
}
The JavaScript
The beatiful thing about jQuery Cycle2 is that it require very little custom configuration, unless of course you want to do tricker thangs. So all we need for basic implementation is jQuery and the script itself. Everything else is handled via data-attributes as we saw in our HTML.
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
All Done
And that’s it – a fully responsive slideshow that’s nice and flexible. I hope this is helpful in your projects!
Discussion