Plugins jQuery; Owl Roulette
Javascript
Alejandro Lucena
Owl Carousel es uno de los plugins jQuery de slider más potentes del panorama Web. Nosotros llevamos trabajando sobre él mucho tiempo. Podemos destacar su simplicidad, capacidad responsive, su facilidad de personalización y su gran cantidad de eventos que hacen fácil el desarrollo sobre él.
Queremos aportar nuestro pequeño granito de arena a este gran proyecto haciendo una ruleta simple, perfecta para cualquier sorteo random en la web. Para ello vamos a usar el Owl Carousel, jQuery, Javascript y poco más.
Empezamos por el HTML necesario y los assets que necesitamos. Vamos a usar los CDNs de jQuery y Owl para simplificar y mejorar la carga de recursos.
<!DOCTYPE html> <html> <head> <title>Owl Roulette</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"> <link rel="stylesheet" href="assets/main.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script src="assets/roulette.js"></script> </head> <body> <div class="owl-carousel owl-theme"> <div class="item element-roulette" data-item="1"><h4>1</h4></div> <div class="item element-roulette" data-item="2"><h4>2</h4></div> <div class="item element-roulette" data-item="3"><h4>3</h4></div> <div class="item element-roulette" data-item="4"><h4>4</h4></div> <div class="item element-roulette" data-item="5"><h4>5</h4></div> <div class="item element-roulette" data-item="6"><h4>6</h4></div> <div class="item element-roulette" data-item="7"><h4>7</h4></div> <div class="item element-roulette" data-item="8"><h4>8</h4></div> <div class="item element-roulette" data-item="9"><h4>9</h4></div> <div class="item element-roulette" data-item="10"><h4>10</h4></div> </div> <div class="wrap-jump"> <button class="btn-jump" id="js-btn-jump">Jump</button> </div> </body> </html>
Continuamos con la funcionalidad básica en Javascript/jQuery. Iniciamos Owl y creamos un evento para el botón Jump. En la primera ejecución lanzamos el evento autoplay para mostrar todos los elementos de la ruleta a modo de escaparate de ésta.
Cuando se pulsa sobre el botón Jump se genera un número aleatorio entre 1 y 10 y se lanza la ruleta, reduciendo la velocidad progresivamente. Por último implementamos que la ruleta pare en el elemento que corresponda al número aleatorio previamente seleccionado.
var stoping = false;
var itemSelected = 0;
jQuery(function ($) {
var $owl = $('.owl-carousel');
// Initialize Owl
$('.owl-carousel').owlCarousel({
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});
// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
// Random between 1 and 10
itemSelected = Math.floor((Math.random() * 10) + 1);
var $jump = $(this);
$jump.html('Jumping ...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});
// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop
var index = e.item.index;
var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');
if (item == itemSelected) {
// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Jump');
$('#js-btn-jump').removeAttr('disabled');
}
}
});
// Showcase
slowSpeed($owl, 1400);
});
/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}
/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}
Todo esto es fácilmente adaptable a proyectos más complejos.
Podéis descargar el código completo del Owl Roulette desde Github, así como ver la demo de éste.
