Bootstrap + JQuery Cycle (Responsive Slide Show)

Making a responsive slide show from my personal favorite slide show. Resize this page and see what happens.

Simple JS File

Check out the responsiveslideshow.js, simply loot the code, Pager already ready for your pagination needs, uncomment and go :)

View details »

Two Steps: JS + invisible PNG hack

Wouldn't it be great if HTML didn't need hacks? To ensure cross-browser compatibility (IE7+), an invisible PNG is required.

View details »

Works on mobile

Tested on Android 2.2+ and iOS4+. It even responds to device rotations. Performamce of slide show transitions vary device to device.

Not all slide show are created equal, fortunately JQuery Cycle is exceptional and includes a containerResize property. This allows the slideshow to resize. However, scaling a slideshow and having it maintain its height gets trickier. This project assumes the following:

The slide height is known prior or can be determined
The slide height is consistent
A blank PNG/GIF of equal aspect ratio can be provided

Page Mark-Up

		            	
		            		<div class="slidecontainer">
		            		<id="slideshow" class="fullwidth">
		            		<img src="img/slideimage1.jpg" width="100%">
		            		<img src="img/slideimage2.jpg" width="100%">
		            		<img src="img/slideimage3.jpg" width="100%">
		            		<div>
		            		<img src="img/blank.png" width="100%">
		            		<div>

Scaffolding

Resize the window. The Slide show works even in scaffolding!

Using JQuery Cycle with DIVs

Using JQuery to Resize

The Responsive Slideshow JS includes a imageresize(); function grabs the height of any div within the slide show with the class of "slide1", and scales according to its height.

You can even use Divs

Dynamic reintermediate engage holistic incentivize transparent deliver interactive repurpose envisioneer remix convergence engage. Platforms web-enabled capture engineer real-time incentivize open-source models impactful. Open-source frictionless web-enabled, "networks," schemas, "systems, beta-test," strategic; iterate, extend partnerships repurpose seamless share relationships.

Compelling ROI capture interactive granular networking semantic redefine methodologies holistic granular web-enabled platforms global benchmark. Efficient cutting-edge, deliver turn-key dynamic strategic scalable share eyeballs integrate AJAX-enabled relationships. Implement systems visualize cross-media, efficient channels cultivate harness; webservices interactive engage dynamic convergence web-readiness, transform value transition.