Code Snippets

2D Mode

1
2
3
4
5
6
7
var cf3d = new CarouselFlow(el, {
  force2d:true,
  gal2d:{
    maxScale:0.75,
    distance:300
  }
});

Enable mouse drag

1
2
3
var cf3d = new CarouselFlow(el, {
  useDrag:true
});

Outward mode

1
2
3
var cf3d = new CarouselFlow(el, {
  mode:'outward'
});

Inward mode

1
2
3
var cf3d = new CarouselFlow(el, {
  mode:'inward'
});

Flat mode

1
2
3
var cf3d = new CarouselFlow(el, {
  mode:'flat'
});

General container size

1
2
3
4
5
6
var cf3d = new CarouselFlow(el, {
 mediaviewer:{
   containerWidth:500,
   containerHeight:300
 }
});

Custom AJAX processing

1
2
3
4
5
6
7
var cf3d = new CarouselFlow(el, {
 mediaviewer:{
   ajaxProcessor:function(con, req) {
     con.innerHTML = req.responseText;
   }
 }
});

Full width

1
2
3
4
5
<style>
   .rs-cf3d {
      width:100%;
   }
</style>

Add event handlers

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
cf3d.addEventListener('target', function(e) {
  console.log(e.detail);
});

cf3d.addEventListener('cload', function(e) {
  console.log(e.detail);
});

cf3d.addEventListener('cloadcomplete', function(e) {
  console.log(e.detail);
});

Create distributions

grunt dist

Build example files

grunt examples

Compile pug templates

grunt pug

Compile SASS

grunt compass

Watch files for changes

grunt watch