Here's my Jquery Object carousel work

TECH USED :

HTML5 CSS3 jquery annyang.js (voice managing) touch-swipe.js (swipe devices)

FEATURES :

• You can create as much carousel as you want, just re-use the html code, and change the background-image urls

• The carousels are fully customizable.

• When you create a new instance of Carousel in the script.js index, you pass an object as argument, defining :

  • elt : string The DOM element attached to the object created
  • pagination : boolean ON / OFF pagination. Pagination circles are clickable to navigate.
  • speed : number seconds between each slide ( 0 means no automatic sliding)
  • transition_timing : number seconds of the transition between the slides
  • arrows : boolean allows the navigation using the arrows interface
  • ratio : number You can set an image ratio (best between 0.5 and 1). Just set the width you want to the .carousel in CSS.

• The carousels will auto-resize on window.resize(), to fit the page anytime.

• Autofocus system will set a focus on every carousel that is entirely displayed in the page. The autofocus allows :

  • Voice control, just get in a quiet room, and say "previous" or "next"
  • Keyboard control, with your left and right keys

• Fullscreen visualisation is activable by clicking the icon in the description of some pictures. To exit, just click the close icon, click the layer or press esc.

• Sliding will stop on container hover

• The carousels will autoloop

• When on mobile, swiping left or right will make the images slide

• You can drag and drop the images to make them slide

DIFFICULTIES :

I had a hard time trying to make the loop animation softer. Also, setting the autofocus was kind of difficult, and it could be ameliorated.