Syntax* 

Welcome to Pull Digital's technology blog Syntax*.

Using jQuery Cycle To Display A Full Width Slideshow With Fixed Width Slides

I am a big fan of the jQuery Cycle plug-in, it is simple to use and has all the options and features I have ever needed from a jQuery slide show.

That said when I was asked recently to develop a slide show which fitted to 100% of the screen width, but with fixed sized slides sliding from edge to edge, there wasn't an easy way of achieving it with Cycle.

The problem is that when Cycle initialises, it applies absolute sizing and positioning to all the slides and the slide container, and then slides the content based on these calculations. This means that when the window is resized, the slide show stays at the original width, and the slides aren't centred on the page.

See a demo of the original slide show:
http://pulldigital-clients.s3.amazonaws.com/Pull-Digital/Demos/Full-Width-Cycle/standard.html

css1.pngTo achieve the basic slide show I wrapped each image in a div, the div set to 100% wide and text align centre.
 
This created the effect I was trying to achieve, but when the browser was resized the slide show breaks until the page is refreshed.

So, step 1 was to try to reset the size of the slide show when the browser window was resized.

Using the jQuery $(window).resize function the first thing to do is to destroy the current Cycle instance using Cycle's .cycle('destroy') function. This is necessary to reset the widths of the slides.

Then using a simple jQuery function I could set the widths of the slide divs (not the images) to the width of the slide show. Then the Cycle function could be restarted by duplicating the original Cycle function in the $(window).resize function.

js1.png

This worked really well, the slide show was resizing to the width of the browser, and was restarting. The pretty big problem was that when the Cycle function was called after the resize it would always go back to the first slide.

Cycle has an option (startingSlide) where you can specify any slide to start from. The plan was then to record the current slide and then reset the slide show to this slide when it is restarted.

The first thing to do is to loop through all the slides and give them an index. I used the data attribute but you could use "rel" as an alternative.

js2.png

Then using the Cycle callback "before" we can record the current slide by setting the data attribute of the parent slide show div, with the slide number of the current slide.

js3.png

Now the current slide is stored in the data attribute of the slide show, when the slide show is re-started we can use that number to set the starting slide.

js4.png

See the fully working demo (view source for the scripts)
http://pulldigital-clients.s3.amazonaws.com/Pull-Digital/Demos/Full-Width-Cycle/index.html

Here is the full script:

js5.png


Some Of Our Clients

  • First-Central
  • Boux-Avenue
  • Conversis
  • John-Lewis
  • EY
  • Kompan
  • Living-Streets
  • Meteor
  • OSI
  • Schwarzkopf
  • GoCycle
  • SSTL
  • Chaucer-Direct
  • TurtleMat
  • UK200Group
  • ASDA
  • Vinci
  • Zoggs

We Deliver Marketing CertaintyTM

Find Out More