Carousel

Carrusel

Actualizado el 23/10/2024

Carrusel pequeño

El carrusel pequeño esta destinado a mostrar conjuntos de imágenes pequeñas, por ejemplo, un conjunto de logotipos con sus correspondientes enlaces.

Cada sección del carrusel podría tener asociado un enlace, de manera opcional. Este componente no permite la inclusión de vídeo o elementos interactivos.

  • Texto alternativo imagen 1
  • Texto alternativo imagen 2
  • Texto alternativo imagen 3
  • Texto alternativo imagen 4
<> Código
× Ocultar Código
  • HTML
  • JS
<ul class="ulpgcds-carrusel ulpgcds-carrusel--small">
  <li><img src="/sites/default/files/image1.jpg" alt="Texto alternativo imagen 1" /></li>
  <li><img src="/sites/default/files/image2.jpg" alt="Texto alternativo imagen 2" /></li>
  <li><img src="/sites/default/files/image3.jpg" alt="Texto alternativo imagen 3" /></li>
  <li><img src="/sites/default/files/image4.jpg" alt="Texto alternativo imagen 4" /></li>
</ul> 
$(document).ready(function(){
     $('.ulpgcds-carrusel--small').slick({
              slidesToShow: 3,
              slidesToScroll: 3,
              prevArrow: '<button type="button" class="slick-prev"><span>Anterior</span></button>',
              nextArrow: '<button type="button" class="slick-next"><span>Siguiente</span></button>',
              dots: true,
              responsive: [
              {
                breakpoint: 600,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1,  
                  dots: true,
                }
              }]
            }); 
}); 

Carrusel mediano

Será un carrusel de imágenes y un titular. Podrá tener enlace a un contenido específico, ya sea externo o interno a la web.

El carrusel mediano se puede emplear para mostrar contenido multimedia (imágenes y videos) o para destacar enlaces otras páginas con el objetivo de fomentar la navegación de lo usuarios hacia esas páginas.

Adicionalmente, debe existir siempre un texto descriptivo que acompañe a la imagen o video. En caso de que se pretenda enlazar a otras páginas, este texto descriptivo debe tener formato de enlace.

Desaconsejamos el uso de la rotación automática para ofrecer una experiencia de usuario satisfactoria y permitir ampliar el contenido bajo demanda.

<> Código
× Ocultar Código
  • HTML
  • JS
<ul class="ulpgcds-carrusel ulpgcds-carrusel--medium">
  <li><a href="#"><span class="ulpgcds-carrusel--medium__img"><img src="/sites/default/files/world_university_rankings_2020_top_1000.jpg" alt="Texto alternativo imagen 1" /></span><span class="ulpgcds-carrusel--medium__txt">Ranking THE</span></a></li>
  <li><a href="#"><span class="ulpgcds-carrusel--medium__img"><img src="/sites/default/files/rector_25n.jpg" alt="Texto alternativo imagen 2" /></span><span class="ulpgcds-carrusel--medium__txt">"Yo sumo, yo actuo"</span></li>
  <li><a href="#"><span class="ulpgcds-carrusel--medium__img"><img src="/sites/default/files/soymaster_postal.jpg" alt="Texto alternativo imagen 3" /></span><span class="ulpgcds-carrusel--medium__txt">Másteres universitarios</span></li>
  <li><a href="#"><span class="ulpgcds-carrusel--medium__img"><img src="/sites/default/files/africa_2.jpg" alt="Texto alternativo imagen 4" /></span><span class="ulpgcds-carrusel--medium__txt">Casa África</span></a></li>
</ul> 
$(document).ready(function(){
     if ($(".ulpgcds-carrusel--medium").length){
                    $(".ulpgcds-carrusel--medium").slick({
                    slidesToShow: 3,
                    slidesToScroll: 3,                                  
                     prevArrow: '<button type="button" class="slick-prev"><span>Anterior</span></button>',
                      nextArrow: '<button type="button" class="slick-next"><span>Siguiente</span></button>',
                      dots: true, 
                    responsive: [
                      {
                        breakpoint: 1280,
                        settings: {
                          slidesToShow: 3,
                        }
                      },                                
                      {
                        breakpoint: 1024,
                        settings: {
                          slidesToShow: 2,
                          slidesToScroll:2,
                        }
                      },
                      {
                        breakpoint: 768,
                        settings: {                             
                          slidesToShow: 1,
                          slidesToScroll:1,
                        }
                      }
                    ]
                });   
            }
}); 

Carrusel grande

El objetivo de este carrusel es emplearlo para destacar contenido en la página principal del sitio web y siempre al inicio de la misma. 

Debería ser empleado para dar información efímera destacada como, por ejemplo, eventos de especial interés como el periodo de matriculación o las jornadas de puertas abiertas.

Siempre deberá estar compuesto de una imagen representativa, título, subtítulo y un enlace a la página de destino. Nunca se deberían mostrar más de cinco elementos en este carrusel.

Es muy importante que los textos empleados, sean claros, cortos y concisos para asegurar que el mensaje es asimilado rápidamente por el usuario.

<> Código
× Ocultar Código
  • HTML
  • JS
<ul class="ulpgcds-carrusel ulpgcds-carrusel--large">
  <li><span class="ulpgcds-carrusel--large__img"><img src="/sites/default/files/world_university_rankings_2020_top_1000.jpg" alt="Texto alternativo imagen 1" /></span><span class="ulpgcds-carrusel--large__box"><span class="ulpgcds-carrusel__center"><h2>Ranking THE</h2><p>Texto descriptivo pruebas</p><a href="#" class="ulpgcds-btn ulpgcds-btn--primary">Acceder</a></span></span></li>
  <li><span class="ulpgcds-carrusel--large__img"><img src="/sites/default/files/soymaster_postal.jpg" alt="Texto alternativo imagen 3" /></span><span class="ulpgcds-carrusel--large__box"><span class="ulpgcds-carrusel__center"><h2>Másteres universitarios</h2><p>Texto descriptivo 3</p><a href="#" class="ulpgcds-btn ulpgcds-btn--primary">Acceso másteres</a></span></span></li>
  <li><span class="ulpgcds-carrusel--large__img"><img src="/sites/default/files/africa_2.jpg" alt="Texto alternativo imagen 4" /></span><span class="ulpgcds-carrusel--large__box"><span class="ulpgcds-carrusel__center"><h2>Casa África</h2><p>Texto descriptivo 4</p><a href="#" class="ulpgcds-btn ulpgcds-btn--primary">Ver noticia</a></span></span></li>  
</ul> 
if ($('.ulpgcds-carrusel--large')){            
 $('.ulpgcds-carrusel--large').slick({
        prevArrow: '<button type="button" class="slick-prev"><span>Anterior</span></button>',
    nextArrow: '<button type="button" class="slick-next"><span>Siguiente</span></button>',
    dots: true
    ); 
}
// Ajustes para su uso en portada al redimensionar la pantalla
$(window).bind("resize",function() {
if ($('.ulpgcds-carrusel--large').length){
            var ancho = (document.body.clientWidth);
            if (ancho > 1440){
                var padding = (ancho - 1440)/2;
                $(".ulpgcds-carrusel--large__box").css({ "paddingLeft" : padding });
            }
            else{
                $(".ulpgcds-carrusel--large__box").css({ "paddingLeft" : "16px" });
                                if (ancho < 767){                    
                    $('.ulpgcds-carrusel--large li').on('click',function(){                                           
                        window.location.href= $('.ulpgcds-btn',this).attr('href');
                     });
                }
            }
            var alto = ($('.ulpgcds-carrusel--large').height() - $(".ulpgcds-carrusel--large__box").height);
            $(".ulpgcds-carrusel--large__box").css({ "marginTop" : alto });
        }
});     

Dependencias externas

El Sistema de Diseño de la ULPGC cuenta con 3 carruseles de varios tamaños y orientados a diferentes usos.

De las distintas librerías externas existentes, se ha escogido Slick, por su sencillez, flexibilidad y criterios de accesibilidad que ayudarán a mejorar la experiencia de usuario con este tipo de componentes.

Para hacer uso de esta librería, habrá que añadir tanto su librería JS como librería CSS en el head de la página en cuestión:

<head>
...
<link rel="stylesheet" type="text/css" href="https://cdn.ulpgc.es/ulpgcds/1.0/js/slick/slick.css"/>
...
<script type="text/javascript" src="https://cdn.ulpgc.es/ulpgcds/1.0/js/slick/slick.js"></script>
...
</head>

Para cada carrusel que queramos incluir, se deberá añadir el código necesario para inicializarlo en la forma:

$('.ulpgcds-carrusel--small').slick({
              slidesToShow: 3,
              slidesToScroll: 3,
              prevArrow: '<button type="button" class="slick-prev"><span>Anterior</span></button>',
              nextArrow: '<button type="button" class="slick-next"><span>Siguiente</span></button>',
              dots: true,
              responsive: [
              {
                breakpoint: 600,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  dots: true,
                }
              }]
            });

 

Estilos CSS

Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.

Selector CSSDescripción
.ulpgcds-carruselAplica estilos generales de los carruseles
.ulpgcds-carrusel--smallAplica estilos específicos de la versión más pequeña del carrusel
.ulpgcds-carrusel--mediumAplica estilos específicos de la versión mediana del carrusel
.ulpgcds-carrusel--largeAplica estilos específicos de la versión más amplia del carrusel
.ulpgcds-carrusel--medium__imgAplica estilos específicos de las imágenes del carrusel mediano
.ulpgcds-carrusel--medium__txtAplica estilos específicos del texto del carrusel mediano
.ulpgcds-carrusel--large_imgAplica estilos específicos de las imágenes del carrusel más grande
.ulpgcds-carrusel--large__boxEstablece estilos para la caja de texto del carrusel más grande
.ulpgcds-carrusel__centerAplica estilos específicos para centrar el carrusel verticalmente
Estado del componente
Estable