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