Crear carrusel de arranque con subtítulos en lugar de puntos

El carrusel de arranque estándar contiene puntos para cambiar las diapositivas (ejemplo en la página de arranque ).

Sin embargo, recientemente leí Por qué los usuarios no están haciendo clic en el carrusel de su página de inicio, que propuso usar leyendas en lugar de puntos como a continuación:

ejemplo

¿Es esta opción posible en bootstrap? Si es así, ¿cómo puedo hacerlo?

Puede hacerlo anulando los styles en los elementos de list de carousel-indicators .

Aquí hay una sección de indicadores típicos:

 <ul class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active">One</li> <li data-target="#myCarousel" data-slide-to="1">Two</li> <li data-target="#myCarousel" data-slide-to="2">Three</li> </ul> 

Deseará sobrescribir algunos de los styles pnetworkingeterminados de Bootstrap:

Convierta la pantalla de puntos a rectangularjs agregando un width y height y eliminando el border-radius del border-radius :

demo 1

A continuación, recupere el text eliminando el text-indent negativo agregado por Bootstrap:

demo 2

Finalmente, agrega tu propio background border y estilo, como prefieras.
El estilo completo debería verse así:

 .carousel-indicators > li, .carousel-indicators > li.active{ width: 100px; height: 25px; border-radius: 0; border: solid 1px grey; background: lightgrey; text-indent: 0; } .carousel-indicators > li.active { background: white; } 

Demostración de trabajo en Fiddle

captura de pantalla


Incluso podría envolver todo el fragment de CSS dentro de una consulta de medios, de modo que cuando el tamaño de la pantalla se volviera limitado, se restableciera por defecto a los puntos en lugar de astackr torpemente los elementos de la list:

 @media screen and (min-width: 550px) { /* Wrap CSS Here */ } 

Demostración receptiva en Fiddle