dojo-carousel

Plugin para generar un carrusel utilizando el framework de dojo.

Opciones del plugin.

Parámetros

Tipo	Nombre	Descripción
string	sSource	Origen de las imágenes del carousel.
string	sTarget	Destino de las imágenes al hacer clic sobre el carousel.
string	sPosition	Posición del carousel 'horizontal' o 'vertical'.
boolean	bSameWidth	Si es verdadero y la posición es 'vertical' toma el mismo alto que el ancho del contenedor.
boolean	bShowInfo	Si es verdadero lee las propiedades de data-title y data-description del elemento, para mostrarlo.
int	iMaxHeight	Si el bSameWidth es falso, toma este valor como el alto del carousel (pixeles), solo si la posición es vertical.
int	iDuration	Duracción en segundos, que tarda para cambiar entre secciones de imágenes dentro del carousel.
int	iNumberImages	Número de imágenes a mostrar por sección en el carousel.

NOTA: sTarget y sSource son obligatorios.

Opciones por defecto.

	sPosition: "horizontal",
	bSameWidth: false,
	iMaxHeight: 500,
	iDuration: 5,
	iNumberImages: 3,
	bContinue: false,
	bShowInfo: false,

Metadatos y clases para el código HTML

Metadatos configurables.

• data-title: Titulo del elemento del carousel.
• data-description: Descripción del elemento del carousel.

Clases

• carousel-target: Para la etiqueta html que sera el target del carousel, donde se mostraran las imágenes al dar clic.
• carousel-source: Para la etiqueta html que sera la fuente del carousel, en donde estarán los elementos del carousel.
• carousel-element: Para todos los elementos que estarán dentro de la etiqueta fuente del carousel.
• video-element: Para los elementos que son vídeos y que se encuentran dentro de la etiqueta fuente del carousel.

Como usar

Código Javascript.

	// Configuración
	var settings = {
		sSource: "carousel-source",
		sTarget: "carousel-target",
		sPosition: "vertical",
		iNumberImages: 2,
		bShowInfo: true
	};
// Se crea una nueva instancia del carousel.
var oCustomCarousel = new Carousel();

// Se establecen la configuración del usuario.
oCustomCarousel.setSettings(settings);

// Se inicia el carousel
oCustomCarousel.initCarousel();

Código html.

	<div id="content">
		<div id="carousel-target" class="carousel-target"></div>
		<div id="carousel-source" class="carousel-source">
			<img src="img/chris1_lg.jpg" class="carousel-element" data-title="Titulo 1" data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." alt="">
			<div class="carousel-element video-element" data-title="Titulo 4" data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
				<iframe src="//www.youtube.com/embed/S7b1aLY3tyI" frameborder="0" allowfullscreen></iframe>
			</div>
			<img src="img/chris3_lg.jpg" class="carousel-element" data-title="Titulo 5" data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." alt="">
		</div>
	</div>

Para ver ejemplo da clic aquí.