Slider
Un image slider es un componente que permite mostrar una serie de imágenes en un contenedor, con la posibilidad de navegar entre ellas.
Playground
- Ruby
- Html
- Javascript
<%= carousel_widget Slides_cont_img, allow_sidebar: true, sidebar_title: 'Título Custom' %>
<div class="carousel-container">
<div id="carousel-widget" class="carousel slide" data-ride="carousel">
<div class="carousel-content ">
<ol class="carousel-indicators">
<li data-target="#carousel-widget" data-slide-to="0" class="dot active"></li>
<li data-target="#carousel-widget" data-slide-to="1" class="dot"></li>
<li data-target="#carousel-widget" data-slide-to="2" class="dot"></li>
<li data-target="#carousel-widget" data-slide-to="3" class="dot"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://images.unsplash.com/photo-1593288942460-e321b92a6cde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" target="_blank" data-open-aside-bar="link" data-aside-bar-title="Beneficios">
<div class="d-flex justify-content-center reflective-banner">
<div class="reflection-img">
<img class="d-block w-100 carousel-blur-image" src="https://images.unsplash.com/photo-1593288942460-e321b92a6cde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"/>
</div>
<div class="position-absolute w-100">
<img class="d-block w-100 carousel-center-image" src="https://images.unsplash.com/photo-1593288942460-e321b92a6cde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="Beneficio de prueba medio dia"/>
</div>
</div>
</a>
</div>
<div class="carousel-item">
<a href="https://images.unsplash.com/photo-1591871937631-2f64059d234f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" target="_blank" data-open-aside-bar="link" data-aside-bar-title="Beneficios">
<div class="d-flex justify-content-center reflective-banner">
<div class="reflection-img">
<img class="d-block w-100 carousel-blur-image" src="https://images.unsplash.com/photo-1591871937631-2f64059d234f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80"/>
</div>
<div class="position-absolute w-100">
<img class="d-block w-100 carousel-center-image" src="https://images.unsplash.com/photo-1591871937631-2f64059d234f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="Buk Benefits destacado"/>
</div>
</div>
</a>
</div>
<div class="carousel-item">
<a href="https://www.cuidadosparamascotas.com/wp-content/uploads/2019/09/gatitos-importancia-vitaminas.jpg" target="_blank" data-open-aside-bar="link" data-aside-bar-title="Beneficios">
<div class="d-flex justify-content-center reflective-banner">
<div class="reflection-img">
<img class="d-block w-100 carousel-blur-image" src="https://www.cuidadosparamascotas.com/wp-content/uploads/2019/09/gatitos-importancia-vitaminas.jpg" alt="Capacitación"/>
</div>
<div class="position-absolute w-100">
<img class="d-block w-100 carousel-center-image" src="https://www.cuidadosparamascotas.com/wp-content/uploads/2019/09/gatitos-importancia-vitaminas.jpg" alt="Capacitación"/>
</div>
</div>
</a>
</div>
<div class="carousel-item">
<a href="https://cf.ltkcdn.net/gatos/images/std/236641-800x515r1-etapas-desarrollo-gatitos.jpg" target="_blank" data-open-aside-bar="link" data-aside-bar-title="Beneficios">
<div class="d-flex justify-content-center reflective-banner">
<div class="reflection-img">
<img class="d-block w-100 carousel-blur-image" src="https://cf.ltkcdn.net/gatos/images/std/236641-800x515r1-etapas-desarrollo-gatitos.jpg" alt="Beneficio con archivo"/>
</div>
<div class="position-absolute w-100">
<img class="d-block w-100 carousel-center-image" src="https://cf.ltkcdn.net/gatos/images/std/236641-800x515r1-etapas-desarrollo-gatitos.jpg" alt="Beneficio con archivo"/>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="carousel-controls">
<a class="carousel-control carousel-control-prev" href="#carousel-widget" role="button" data-slide="prev">
<img src="/images/bukbenefits/raak-carrusel-buk-L.jpg" class="control-img control-img-prev"/>
<div class="carousel-control-prev-icon-container">
<span aria-hidden="true" class=" material-icons notranslate ">arrow_back_ios</span>
<span class="sr-only">Anterior</span>
</div>
</a>
<a class="carousel-control carousel-control-next" href="#carousel-widget" role="button" data-slide="next">
<img src="/images/bukbenefits/bukplay-carrusel-buk.png" class="control-img control-img-next"/>
<div class="carousel-control-next-icon-container">
<span aria-hidden="true" class=" material-icons notranslate ">arrow_forward_ios</span>
<span class="sr-only">Siguiente</span>
</div>
</a>
</div>
</div>
</div>
import onmount from 'onmount';
onmount('#carousel-widget', function () {
const carousel = $(this);
const changeControlImages = () => {
if (carousel.find('.carousel-item').length > 1) {
const slides = carousel.find('.carousel-inner');
const currentSlide = slides.find('.active');
let prevSlide = currentSlide.prev();
let nextSlide = currentSlide.next();
if (prevSlide.length === 0 && nextSlide.length === 1) {
prevSlide = slides.children().last();
if (carousel.find('.carousel-item').length === 2) {
$('.control-img-prev').hide();
$('.control-img-next').show();
}
}
else if (nextSlide.length === 0 && prevSlide.length === 1) {
nextSlide = slides.children().first();
if (carousel.find('.carousel-item').length === 2) {
$('.control-img-next').hide();
$('.control-img-prev').show();
}
}
const prevSlideImg = prevSlide.find('img').attr('src');
const prevSlideControl = carousel.find('.carousel-control-prev');
prevSlideControl.find('img.control-img').attr('src', prevSlideImg);
const nextSlideImg = nextSlide.find('img').attr('src');
const nextSlideControl = carousel.find('.carousel-control-next');
nextSlideControl.find('img.control-img').attr('src', nextSlideImg);
}
};
changeControlImages();
// Este evento se ejecuta en cada cambio de slide
carousel.on('slid.bs.carousel', function () {
changeControlImages();
});
});
Lista de parámetros
| Parámetro | Tipo | Detalle |
| Slides | Hash | Slides a mostrar image_url: '', alt: '', link: '' |
| allow_sidebar | Boolean | Si es True, se muestra la opcion requerida en un sidebar. |
| sidebar_title | String | Título del Sidebar |
Anatomía
1. Contenedor de imágenes
Permite cargar una imagen dentro del contenedor.
2. Controladores de flecha
Permite cambiar un slide de forma manual.
3. Controladores de secuencia
Indica la cantidad de imagenes y cual es la visualización actual. No es recomendable tener más de 5 imágenes cargadas.
Casos de uso
Permiten que más de una pieza de contenido ocupe el mismo contenedor principal. Se usa principalmente en la vista buk benefits, funciona como una vitrina “ecommerce” de beneficios destacados, donde el usuario es libre de configurarlo. El componente Slider solo tiene imágenes.
Se considera un contenedor principal que permite la visualización de 3 destacados, posicionando al centro una vista completa donde el usuario puede interactuar por medio de controladores de flechas a cada lado (⬅ ➡). Además de la animación continua.
Se recomienda usar hasta 5 fotogramas ya que está comprobado que los usuarios pierden el interés al sobrepasar ese número.
Puede contener un enlace.