A quick way to add a hover responsive, fast cycling, jQuery powered slideshow to your site.
Here’s what we’ll be doing:
- Super fast slideshow that only runs when hovered over.
- Overlay logo that toggles between two different states depending on hover state
- Inspiration piece for this tutorial: Cargo Collective
- See our end goal by visiting our demo page.
This is the structure for each slideshow, with the images are pulled from the unordered list and turned into a slideshow by jQuery Cycle Plugin.
The .link element is where a URL can be provided for when the slideshow is clicked. It is also how we will swap the logo on hovers.
The dimensions for my slideshow are 200px by 150px. Depending on the sizes of your logo and slides, the below background position coordinates and overall dimensions may need to get adjusted.
- The logo is toggled between the two color variations using the background position hover technique.
- The unordered slides list is given a class of “active” when hovered over, making it visible on the page.
ground: #111 url('img/bg.jpg');
background: url('img/logo.png') no-repeat center top;
background-position: center -150px;
On the jQuery side, we want to accomplish two tasks:
- Tie the jQuery Cycle Plugin to our list of images, turning them into a slideshow.
- Swap between pause and play states when the slideshow is hovered over. This means the slideshow is hidden and paused when the mouse is not over it.
// Cycle plugin
// Pause & play on hover