Skip navigation

# Slider

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