jrcarousel

WebJar for jrcarousel

License	License MIT
GroupId	GroupId org.webjars.npm
ArtifactId	ArtifactId jrcarousel
Last Version	Last Version 1.0.0
Release Date	Release Date Nov 30, 2015
Type	Type jar
Description	Description jrcarousel WebJar for jrcarousel
Project URL	Project URL http://webjars.org
Source Code Management	Source Code Management https://github.com/vinayakjadhav/jRCarousel

Download jrcarousel

Filename	Size
jrcarousel-1.0.0.pom
jrcarousel-1.0.0.jar	13 KB
jrcarousel-1.0.0-sources.jar	22 bytes
jrcarousel-1.0.0-javadoc.jar	22 bytes
Browse

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/jrcarousel/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>jrcarousel</artifactId>
    <version>1.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/jrcarousel/
implementation 'org.webjars.npm:jrcarousel:1.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/jrcarousel/
implementation ("org.webjars.npm:jrcarousel:1.0.0")

Apache Buildr

'org.webjars.npm:jrcarousel:jar:1.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="jrcarousel" rev="1.0.0">
  <artifact name="jrcarousel" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='jrcarousel', version='1.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "jrcarousel" % "1.0.0"

Leiningen

[org.webjars.npm/jrcarousel "1.0.0"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : jQuery	jar	[1.9.1,1.10)

Project Modules

There are no modules declared in this project.

jRCarousel

jQuery Responsive Carousel - jRCarousel by Vinayak Rangnathrao Jadhav

jRCarousel is a jQuery plugin for responsive carousel with modern effects and multiple options.

Features

Modern effects
Fullscreen Carousel
Tiny plugin (gzipped ~ 1.6kb, uncompressed ~ 4.8kb)
Infinite scroll
Multiple slideLayouts to maintain aspect ratio
Minimal configuration, easy to install
Useful public API for extending the functionalities
Large browsers support ( Internet Explorer(9+), Chrome, Firefox, Safari ..)

Live Demo

Click here for live demo.

Installation

####Using npm

   npm install jrcarousel

Using bower

   bower install jRCarousel

   bower install jrcarousel

old school way

<!-- add jQuery if not already present in your project -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<!-- add jRCarousel plugin -->

<script src="https://cdn.rawgit.com/vinayakjadhav/jRCarousel/master/dist/jRCarousel.min.js"></script>

Setup images source

var slides = [
	{src: 'http://lorempixel.com//1366/768'},
	{src: 'http://lorempixel.com//1366/761'},
	{src: 'http://lorempixel.com//1366/762'},
	{src: 'http://lorempixel.com//1366/763'},
	{src: 'http://lorempixel.com//1366/764'},
	{src: 'http://lorempixel.com//1366/765'},
	{src: 'http://lorempixel.com//1366/766'}
];

Minimal configuration with defaults

$('.jRCarouselGallery').jRCarousel({
					slides: slides
				});

Configuring all available options

$('.jRCarouselGallery').jRCarousel({
 	width: 800, 				/* largest allowed width */
	height: 356, 				/* largest allowed height */
	slides: slides, 			/* array of images source or gets slides by 'slide' class */
	slideLayout : 'contain',  	/* "contain"-fit as per to aspect ratio | "fill"-stretches to fill |  "cover"-overflows but maintains ratio */
	animation: 'scroll', 		/* slide | scroll | fade | zoomInSlide | zoomInScroll */
	animationSpeed: 400,    	/* animation speed in milliseconds */
	animationInterval: 4000,	/* Interval between transitions or per slide show time in milliseconds */
	autoplay: true,         	/* start playing Carousel continuously, pauses when slide is hovered */
	onSlideShow: show,			/* callback when Slide show event occurs */
	navigation: 'circles'		/* circles | squares */
});

Images source provided in javascript

<div class="jRCarouselGallery"></div>

Images source provided in template by adding class `slide`

<div class="jRCarouselGallery">
  <img class="slide" src="http://lorempixel.com//800/351" />
  <img class="slide" src="http://lorempixel.com//800/352" />
  <img class="slide" src="http://lorempixel.com//800/353" />
  <img class="slide" src="http://lorempixel.com//800/354" />
  <img class="slide" src="http://lorempixel.com//800/355" />
</div>

jRCarousel Example

Public API

showSlide(slideIndex) :

  shows the slide specified by the slideIndex by running animation, the slideIndex starts from 0.

showPreviousSlide() :

  shows the previous slide from current slide by running animation

showNextSlide() :

  shows the slide specified by the slideIndex by running animation

getSlideByIndex(slideIndex) :

  returns the slide's jquery object specified by the slideIndex

getCurrentSlide() :

  returns the current slide's jquery object

Usage

var myJRCarousel = $('.jRCarouselGallery').jRCarousel({
				slides: slides
});

myJRCarousel.showSlide(0);
myJRCarousel.showPreviousSlide();
myJRCarousel.howNextSlide();
var slide = myJRCarousel.getSlideByIndex(1);
var currentSlide = myJRCarousel.getCurrentSlide();

Versions

Version
1.0.0 Nov 30, 2015