Slideshow

Camera Slideshow is a jQuery slideshow by Pixedelic.

Basic Slider Pagination circles with the height relative to the width

Camera is a responsive/adaptive slideshow. Try to resize the browser window
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
It's completely free (even if a donation is appreciated)
Camera slideshow provides many options to customize your project as more as possible
It supports captions, HTML elements and videos and it's validated in HTML5 (have a look)
Different color skins and layouts available, fullscreen ready too

Basic HTML

This is the basic html structure:

<div class="camera_wrap">
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_2.jpg"></div>
</div>

Initialization

This is the main function to start your slideshow:

jQuery('your_object').camera();

Essential CSS

You have to call "camera.css" file.

By editing this CSS file you can create your own personal skin.

Slider with thumbnails Thumbnails with fixed height

Camera is a responsive/adaptive slideshow. Try to resize the browser window
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
It's completely free (even if a donation is appreciated)
Camera slideshow provides many options to customize your project as more as possible
It supports captions, HTML elements and videos and it's validated in HTML5 (have a look)
Different color skins and layouts available, fullscreen ready too

Basic HTML

This is the html structure:

<div class="camera_wrap">
    <div data-thumb="images/thumb_1.jpg" data-src="images/image_1.jpg"></div>
    <div data-thumb="images/thumb_2.jpg" data-src="images/image_1.jpg"></div>
    <div data-thumb="images/thumb_3.jpg" data-src="images/image_2.jpg"></div>
</div>

Initialization

Add some options to the main function.

jQuery('your_object').camera({ //the height and the presence of the thumbnails 
  height: '41%',
  pagination: false,
  thumbnails: true
});