Slide Transition & Bootstrap Skin Bootstrap Slider

Este slider apenas em CSS tem um grande design, com mais ênfase nas legendas do que muitos sliders. Como tal, torna-se útil para websites que precisam de utilizar os seus carrosséis para exibir tanto informações como imagens.

Duas setas de navegação de cada lado, que aparecem sempre, uma legenda na parte inferior central, que inclui um título e um parágrafo de texto, e um conjunto de círculos de navegação na parte inferior que permite que o utilizador escolha que slide quer visualizar.

A demo tem um efeito 'sombra' interessante em ambos os lados esquerdo e direito. Isto ajuda os elementos de navegação, particularmente as setas de se destacarem e, reduzirem a importância das imagens. Este slider é óptimo para texto contra uma imagem interessante de fundo, não se destinando a websites que queiram focar apenas as imagens.

As setas de navegação são setas brancas semi-transparentes com um efeito de sombra subtil que lhes dão profundidade. Quando se passa o rato pelas setas, a 'sombra' desse lado escurece e a cabeça da seta fica mais opaca e assim mais brilhante. Ao clicar sobre as setas são mostradas as outras as imagens do carrossel.

As legendas utilizam texto branco com a fonte Helvetica Neue, talvez uma das fontes sans-serif mais reconhecidas e clássicas. É uma fonte imortal que pode ser utilizada em praticamente todas as configurações.

O texto tem uma ligeira sombra que ajuda a se destacar a partir da imagem de fundo, e dá às legendas alguma profundidade. Porque o texto aparece directamente na imagem, irá querer garantir que a cor do seu texto e as imagens de fundo tenham um contraste alto para que a legendas sejam legíveis.

Os pontos de navegação, estão ao centro na parte inferior, cada um representando uma imagem/legenda na apresentação. Eles são transparentes, com uma fina borda branca. O círculo preenchido é branco opaco sem bordas. Deslizando o rato sobre um círculo, traz uma imagem de pré-visualização numa borda branca.

O slider é construído sobre uma estrutura de bootstrap, o que a torna extremamente fácil personalizar para atender às suas necessidades.

Devido ao facto do slider ser apenas em CSS, funciona em navegadores que não tenham JQuery ou Javascript habilitado. Faz também com que o slider seja extremamente rápido a carregar, já que não existe um código javascript embutido ou imagens para transferir. Como tal, é um excelente design de slider, para programadores iniciados de telemóvel, à procura de um slider simples e responsivo para a web moderna.

Uma vez que esta amostra é desenvolvida em HTML5 e CSS, é amigável dos motores de busca, o que é útil para um slider com ênfase no texto. Todas as legendas na sua apresentação terão valor para o SEO.