Si estás buscando un plugins para mostrar tus imágenes de forma impresionante para tu sitio web, en esta publicación te presentaremos el plugins para crear slides más bonito y fácil de usar: Nivo Slider. Como sabes, el sliders de imágenes hace que tu sitio web sea más dinámico, atractivo a la vista de los usuarios. Con el control deslizante, puedes visualizar fácilmente tus múltiples servicios, productos y portafolio de trabajo, ademas el plugins te ayudará a mostrar más cosas en una sola página.
Nivo Slider: El plugins de control deslizante es reconocido mundialmente como el control deslizante de imagen más bello y fácil de usar del mercado. Literalmente, no hay una mejor manera de hacer que tu sitio web se vea totalmente impresionante.
Características principales
Hermosos efectos de transición
Nivo Slider ofrece 16 efectos de transición que van desde cortar y deslizar, hasta desvanecer y plegar, haciendo que sus galerías sean interactivas y divertidas.
Recorte de imagen automático
Nivo Slider cambia el tamaño de las imágenes a un tamaño específico, por lo que no tienes que hacerlo manualmente para cada imagen. No más tiempo perdido.
No se necesitan habilidades de codificación
Crea una hermosa experiencia al reproducir tu galería de imágenes sin ninguna codificación avanzada. Incluye el control deslizante de imágenes en tu sitio web de una manera rápida y muy simple.
Compatibilidad móvil
Las slides o diapositivas generadas por este complemento, son completamente responsive. Las imágenes de tu sitio web se verán estupendas en cualquier tipo de pantalla ya sea una laptop o un teléfono móvil.
Integrando Nivo Slider
Librerías CSS + JS: Incluye las librerías necesarios para el correcto funcionamiento del plugins. Nivo Slider proporciona múltiples temas, ya que se puede incluir cualquier archivo CSS con el tema en la página que desees.
<!-- CSS --> <link rel="stylesheet" href="themes/default/default.css" type="text/css" /> <link rel="stylesheet" href="nivo-slider.css" type="text/css"/> <!-- JS --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="jquery.nivo.slider.js"></script>
HTML: Aquí hemos creado un archivo html de muestra e incluimos 4 imágenes para el control deslizante y establecimos la clase de tema como opción predeterminada, puedes elegir cualquier tema y clase según el aspecto que desees darle a tu sitio web.
<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="http://placeimg.com/1200/440/people" data-thumb="http://placeimg.com/1200/440/people" alt="" title="Example Caption -1" /> <img src="http://placeimg.com/1200/440/animal" alt="" title="Example Caption -2" /> <img src="http://placeimg.com/1200/440/sport" alt="" data-transition="slideInLeft" title="Example Caption -3" /> <img src="http://placeimg.com/1200/440/nature" alt="" title="Example Caption -4" /> </div> </div>
JAVASCRIPT: Finalmente agregamos la función de jquery para que Nivo Slider sea funcional en la página y haga que tu control deslizante de imágenes sea procesable. A continuación se muestra la función básica de Nivo Slider.
<script>
$(function() {
$('#slider').nivoSlider();
});
</script>
Adicionalmente puede pasar más propiedades en nivoSlider () según sea tu necesidad. Aquí está la lista de propiedades que puedes aprobar.
$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false
});
Nivo Slider también proporciona acción de controlador de eventos; puedes realizar cualquier acción después de lanzar cada evento.
$('#slider').nivoSlider({
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
Descargar Nivo Slider (807 descargas)
Consulta la documentación oficial para obtener más detalles de las propiedades y funciones de Nivo Slider
