Doing it with style
Click any of the three images above to see that set of images. If you are using a PC or Mac the click the slide image and move left/right to swipe to the next/previous image.
To close an image set just click/tap the close icon at the bottom center of the image.
Centered below each slide is an indication of the number of slides in the set and your current slide.
A caption can be added to each image and will be shown centered above the image.
The slides can contain images and/or text.
I have the first slide in each set as a text slide to show how this will look. The content of this slide is vertical/horizontal centered.
Slide sizes can be individually styled as cover, contain or auto to fill the browser window, fit within the browser window or be actual size. The Singapore and Australia slides are set to cover and the New Zealand slides to contain.
Image sizes can be produced to suit the browser size and in this demo I have three sizes that are selected by @media queries to suit the browser window size.
The jQuery and CSS used is very minimal and can be easily altered to suit your requirements.
The animation is done using CSS transitions and is smoothed using 3D transforms for browsers that support this feature. So in the iPad, iPhone the scrolling is very smooth.
The slideshow is responsive and will reconfigure when changing from portrait to landscape orientation on tablets and smartphones.
All photographs ©2013 Stu Nicholls
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.