Slideshow

Camera Slideshow is a jQuery slideshow by Pixedelic.

Basic Slider Pagination circles with the height relative to the width

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5

Basic HTML

This is the basic html structure:

  1. <div class="camera_wrap">
  2.     <div data-src="images/image_1.jpg"></div>
  3.     <div data-src="images/image_1.jpg"></div>
  4.     <div data-src="images/image_2.jpg"></div>
  5. </div>

Initialization

This is the main function to start your slideshow:

  1. 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

Basic HTML

This is the html structure:

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

Initialization

Add some options to the main function.

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