Skip to content

NoviBuilder/novi-plugin-camera-slider

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 

novi-plugin-camera-slider

Novi Builder Plugin for visual jQuery Camera Slider customization.

How to Intall

You should follow several simple steps to intall this plugin:

  • Copy the novi-plugin-camera-slider.js file to your path/to/novibuilder/plugins folder.
  • Launch NoviBuilder

What you are able to do

  • Change slide background image
  • Add/Remove slides

Developer Settings

  • querySelector — containes a css selector which defines the Camera Slider main container.

How to add Camera Slider on your page

If your website doesn't contain Camera Slider follow the instructions below to install it.

Include Camera files to Website

Copy the "assets/camera.js", "assets/camera.css" and "assets/images" to website's JS, CSS and images folders respectively and include this files to your website.

Add Camera HTML Layout

Add basic Camera HTML Layout:

 <div class="camera_wrap">
     <div data-src="images/page_slide01.jpg"></div>
     <div data-src="images/page_slide02.jpg"></div>
     <div data-src="images/page_slide03.jpg"></div>
 </div>

Example of Camera markup using Bootstrap:

<section class="section camera_wrap">
    <div data-src="images/page_slide01.jpg">
        <div class="container well well-lg">
             <h1>First slide</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorum modi possimus quidem quos reprehenderit sapiente tenetur vel. Accusantium dolorum ea eveniet fugit hic placeat praesentium, quidem similique sit veniam!</p>
             <p>
                <a class="btn btn-lg" href="#" role="button">Learn more</a>
             </p>
        </div>
    </div>
    <div data-src="images/page_slide02.jpg">
        <div class="container well well-lg">
             <h1>Second slide</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorum modi possimus quidem quos reprehenderit sapiente tenetur vel. Accusantium dolorum ea eveniet fugit hic placeat praesentium, quidem similique sit veniam!</p>
             <p>
                <a class="btn btn-lg" href="#" role="button">Learn more</a>
             </p>
        </div>
    </div>
    <div data-src="images/page_slide03.jpg">
        <div class="container well well-lg">
             <h1>Third slide</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorum modi possimus quidem quos reprehenderit sapiente tenetur vel. Accusantium dolorum ea eveniet fugit hic placeat praesentium, quidem similique sit veniam!</p>
             <p>
                <a class="btn btn-lg" href="#" role="button">Learn more</a>
             </p>
        </div>
    </div>
 </section>

Initialize Camera Slider

Initialize Camera in JS by adding following block code:

$document.ready(function () {
    var cameraWrap = $('.camera_wrap');
    if (cameraWrap.length) {
        var i;
        for (i = 0; i < cameraWrap.length; i++) {
            var c = $(cameraWrap[i]);
            c.camera({
                autoAdvance: false,
                height: '31.21951219512195%',
                minHeight: '640px',
                pagination: true,
                thumbnails: false,
                playPause: false,
                hover: false,
                loader: 'none',
                navigation: false,
                navigationHover: false,
                mobileNavHover: false,
                fx: 'simpleFade'
            })
        }		       
    }
});

About

Novi Builder Plugin for visual jQuery Camera Slider customization.

Resources

Stars

Watchers

Forks

Packages

No packages published