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 });