¿Os habeis fijado en la forma en la que youtube presenta sus videos en el inicio? Pues el plugin que os traigo hoy es muy parecido, se podría decir que incluso mejor, ya que admite cualquier tipo de elemento a deslizar, es responsive, y funciona en pantallas táctiles.
Probar descargando el archivo, para comprobar como funciona, y luego será muy sencillo adaptarlo a las necesidades de tu web.
Demo:
Descarga:
https://github.com/OwlFonk/OwlCarousel2/archive/master.zip
Aqui os dejo algunas de las opciones que puedes editar a tu gusto:
items: 3,
loop: false,
center: false,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,
margin: 0,
stagePadding: 0,
merge: false,
mergeFit: true,
autoWidth: false,
autoHeight: false,
startPosition: 0,
URLhashListener: false,
nav: false,
navRewind: true,
navText: ['prev','next'],
slideBy: 1,
dots: true,
dotsEach: false,
dotData: false,
lazyLoad: false,
lazyContent: false,
autoplay: false,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 250,
fluidSpeed: false,
autoplaySpeed: false,
navSpeed: false,
dotsSpeed: false,
dragEndSpeed: false,
responsive: {},
responsiveRefreshRate : 200,
responsiveBaseElement: window,
responsiveClass: false,
video: false,
videoHeight: false,
videoWidth: false,
animateOut: false,
animateIn: false,
fallbackEasing: 'swing',
callbacks: false,
info: false,
nestedItemSelector: false,
itemElement: 'div',
stageElement: 'div',
//Classes and Names
themeClass: 'owl-theme',
baseClass: 'owl-carousel',
itemClass: 'owl-item',
centerClass: 'center',
activeClass: 'active',
navContainerClass: 'owl-nav',
navClass: ['owl-prev','owl-next'],
controlsClass: 'owl-controls',
dotClass: 'owl-dot',
dotsClass: 'owl-dots',
autoHeightClass: 'owl-height'
Probar descargando el archivo, para comprobar como funciona, y luego será muy sencillo adaptarlo a las necesidades de tu web.
Demo:
Descarga:
https://github.com/OwlFonk/OwlCarousel2/archive/master.zip
Aqui os dejo algunas de las opciones que puedes editar a tu gusto:
items: 3,
loop: false,
center: false,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,
margin: 0,
stagePadding: 0,
merge: false,
mergeFit: true,
autoWidth: false,
autoHeight: false,
startPosition: 0,
URLhashListener: false,
nav: false,
navRewind: true,
navText: ['prev','next'],
slideBy: 1,
dots: true,
dotsEach: false,
dotData: false,
lazyLoad: false,
lazyContent: false,
autoplay: false,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 250,
fluidSpeed: false,
autoplaySpeed: false,
navSpeed: false,
dotsSpeed: false,
dragEndSpeed: false,
responsive: {},
responsiveRefreshRate : 200,
responsiveBaseElement: window,
responsiveClass: false,
video: false,
videoHeight: false,
videoWidth: false,
animateOut: false,
animateIn: false,
fallbackEasing: 'swing',
callbacks: false,
info: false,
nestedItemSelector: false,
itemElement: 'div',
stageElement: 'div',
//Classes and Names
themeClass: 'owl-theme',
baseClass: 'owl-carousel',
itemClass: 'owl-item',
centerClass: 'center',
activeClass: 'active',
navContainerClass: 'owl-nav',
navClass: ['owl-prev','owl-next'],
controlsClass: 'owl-controls',
dotClass: 'owl-dot',
dotsClass: 'owl-dots',
autoHeightClass: 'owl-height'