Desinsetização
Criando um slider usando Bootstrap. Como criar seu próprio slider bootstrap em poucos passos fáceis Carrossel responsivo para bootstrap 3

Criando um slider usando Bootstrap. Como criar seu próprio slider bootstrap em poucos passos fáceis Carrossel responsivo para bootstrap 3

O Twitter Bootstrap 3 é um dos melhores frameworks CSS para desenvolver e manter sistemas de gerenciamento de conteúdo. Com o Bootstrap, você pode criar facilmente blogs ou portfólios usando o sistema de grade do Twitter Bootstrap (layout de grade). No coração de muitos sistemas CMS, geralmente temos um componente básico chamado "Slider" (Carrossel), basicamente é uma exibição auto-sequencial de imagens, mas também pode exibir os últimos projetos concluídos, depoimentos de seus clientes, descrição de ofertas, links para notícias ou artigos recentes do blog. Neste artigo, veremos como criar um controle deslizante usando o componente Carrossel no Twitter Bootstrap 3.

Introdução ao componente Bootstrap 3 Carousel Twitter

A marcação para o componente carrossel é assim:

>
>

...
>
>
...
>

>
>

>
>
>

A partir do código acima, podemos ver que o slider do Bootstrap 3 é dividido em várias partes:

Ponteiros
Conteúdo do controle deslizante
Controles

Para transformar um elemento div no controle deslizante, adicionamos os nomes das classes: carrossel e deslizar. Classe carrossel cria um efeito "carrossel", ou seja, altera os slides em um círculo. Classe deslizar adiciona uma animação deslizante do lado direito ou esquerdo. Os ponteiros são os pequenos círculos na parte inferior do controle deslizante, eles indicam a posição atual do slide e o número de slides. Os ponteiros são criados usando uma lista ordenada.

>
>

Uma lista ordenada tem uma classe indicadores de carrossel, que transforma elementos filhos em pequenos círculos. Cada elemento li deve ter atributo alvo de dados com o ID do contêiner pai. Também deve ter o atributo dados-slide-to com um valor numérico único, para se referir a um slide específico, os valores devem começar com "0".

...
>
>
...
>

Cada elemento com uma classe item tem duas subseções: imagem e legenda do carrossel. A imagem é usada como plano de fundo para o slide. Elemento com classe legenda do carrossel posicionado acima da imagem e usado como título do slide. Lado de dentro legenda do carrossel, podemos adicionar

ou tags, ou mesmo ambos.

O controle é realizado pelas setas para a esquerda e para a direita, elas são usadas para alterar os slides manualmente.

"glyphicon glyphicon-chevron-left"> >
>

"glyphicon glyphicon-chevron-right"> >
>
>

Deve haver dois elementos: um para cada direção. O primeiro elemento terá período elemento com classes glyphicon glyphicon-chevron-esquerda, que é o ícone de seta para a esquerda e o segundo elemento terá as classes glyphicon glyphicon-chevron-right, é uma seta para a direita. No Bootstrap, podemos usar fontes em vez de imagens para exibir ícones.

Isso é tudo! Você criou com sucesso um controle deslizante para seu site. Além disso, você não escreveu uma única linha de código JavaScript, mas bootstrap.js fez tudo para você.

configurações do carrossel

Para personalizar ainda mais o controle deslizante, você pode adicionar vários atributos dados-* para o contêiner pai do carrossel.

"intervalo de dados" é usado para especificar o intervalo de tempo entre a troca de slides. É um valor numérico e o número deve estar em milissegundos.
"pausa de dados" é usado para determinar quando o evento de pausa será acionado. Por exemplo, quando for igual a " flutuar", a troca de slides é interrompida quando o mouse está sobre o controle deslizante.
"quebra de dados" é um atributo booleano e permite que você defina se deseja retomar a troca de slides se o final da lista de slides for atingido.

Customização com jQuery

Se você quiser usar os atributos jQuery e data-*, o Bootstrap permite a inicialização com JavaScript. Para fazer isso, você pode escrever o seguinte código:

$(".carousel" ) .carousel() ;

As configurações do carrossel podem ser definidas usando as opções. Por exemplo:

$(".carrossel")
intervalo: 2000
pausa: "pairar",
envoltório: verdade
} ) ;

Você também pode acionar eventos de controle deslizante manualmente usando o seguinte código:

.carousel("pausa") // pausa
.carousel("ciclo") // habilita slides
.carousel(3) // mostra o quarto slide
.carousel("prev") // mostra o slide anterior
.carousel("next") // mostra o próximo slide

Os métodos acima podem ser chamados de qualquer código JavaScript para controlar a operação normal do controle deslizante. Acho os métodos anterior e seguinte muito úteis se eu quiser mostrar meus próprios botões em vez das setas padrão. Especialmente quando eles estão fora do layout do carrossel.

Conclusão

Este artigo deve ser útil para aqueles que desejam aprender a criar um slider sem escrever milhares de linhas de código JavaScript. Sem dúvida, isso aumentará a velocidade do desenvolvimento. Mais importante ainda, esta solução é cross-browser, então você não precisa arrancar os cabelos para fazê-la funcionar em navegadores mais antigos.

Se você tiver alguma dúvida, por favor, use nosso

Componente de apresentação de slides para elementos de ciclismo - carrossel de imagens ou slides de texto.

Como funciona

Carousel é uma apresentação de slides para exibir uma série de conteúdo baseado em transformações CSS 3D e alguns JS. Funciona com texto, imagens ou marcação regular. Ele também suporta os botões next/prev.

Exemplo

O carrossel não normaliza automaticamente o tamanho do conteúdo do slide. Portanto, você pode precisar de utilitários adicionais para tornar seu conteúdo do tamanho certo. Desde que os carrosséis suportem os botões anterior/seguinte, eles não precisam ser adicionados explicitamente. Adicione e personalize-os você mesmo.

Dê um id exclusivo para a classe .carousel para flexibilidade, especialmente se você usar muitos carrosséis em uma página.

Somente slides

Aqui está um exemplo de um carrossel com apenas slides. Observe a presença das classes .d-block e .img-fluid nas imagens do carrossel - seu objetivo é evitar que o navegador padronize o alinhamento da imagem.

Com controles

Adiciona botões anterior/seguinte:

Com indicadores

Você também pode adicionar indicadores ao carrossel junto com controles.

Requer elemento ativo inicial

A classe .active deve ser adicionada a um dos slides, caso contrário o carrossel não ficará visível.

Com inscrições

Adicione legendas aos seus slides adicionando um elemento de classe .carousel-caption a qualquer elemento de carrossel da classe .carousel-item. Os rótulos são fáceis de ocultar em dispositivos menores usando utilitários de exibição. Eles estão ocultos inicialmente com a classe .d-none e os mostram novamente em dispositivos médios com a classe .d-md-block.

Rótulo do primeiro slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

Rótulo do segundo slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rótulo do terceiro slide

Praesent comodo cursus magna, vel scelerisque nisl consectetur.

"carousel-caption d-none d-md-block">

...

Uso

Através de atributos

O atributo data-slide assume os valores prev ou next, que alteram a posição do slide em relação à sua posição atual. Ou use data-slide-to para navegar até o slide no índice, como 2: data-slide-to="2" , os índices do slide começam em 0 .

O atributo data-ride="carousel" é usado para criar a animação do carrossel. Ele não pode ser combinado com a inicialização explícita do carrossel via JavaScript.

Por JavaScript

Chame o carrossel manualmente:

$(".carrossel"). carrossel()

Opções

Os parâmetros podem ser passados por atributos ou JavaScript. Para usar atributos, adicione o nome do parâmetro a data- , por exemplo: data-interval="" .

Nome	Tipo de	Por padrão	Descrição
intervalo	número	5000	Tempo de atraso entre as mudanças automáticas de slides. Se false, o carrossel não mudará os slides automaticamente.
teclado	boleano	verdadeiro	Se o carrossel responderá a eventos de teclado.
pausa	seqüência \| boleano	flutuar	Se "hover" estiver definido, a alteração do slide será desacelerada por mouseenter e a alteração será iniciada por mouseleave. Se for falso, passar o mouse sobre o carrossel não impedirá a mudança dos slides. Dispositivos ativados por toque: "hover" - pausa no touchend (quando o usuário terminar de interagir com o carrossel) por dois intervalos e, em seguida, altere os slides novamente. Observe que esse comportamento é um acréscimo ao comportamento do mouse descrito acima.
passeio	linha	falso	Troca automática de slides do carrossel após a primeira troca manual de slides pelo usuário. Se carrossel - a troca automática é habilitada após o carregamento.
enrolar	boleano	verdadeiro	Se o carrossel deve mudar suavemente ou discretamente.

Métodos

Métodos assíncronos e transições

Todos os métodos de API assíncrono e lançar transição. Eles são retornados à função que os chamou quando a transição começa, mas até o fim. Além disso, chamando um método em um componente, executar a transição será ignorado.

.carousel(opções)

Inicializa o objeto carrossel com as opções especificadas e inicia a transição de slides.

$(".carrossel"). carrossel ((intervalo: 2000))

.carousel("ciclo")

Altera os slides do carrossel da esquerda para a direita.

.carousel("pausa")

Interrompe a transição de slides.

.carrossel(número)

Rola os slides até um determinado ponto (baseado em 0, semelhante a linhas).

.carousel("anterior")

Rola para o slide anterior. Retorna o valor da chamada da função antes que o elemento "target" seja mostrado(ou seja, antes que o evento slid.bs.carousel seja acionado).

.carousel("próximo")

Para o próximo slide. Retorna o valor da chamada da função antes que o elemento "target" seja mostrado(ou seja, antes que o evento slid.bs.carousel seja acionado).

.carousel("descartar")

Destrói o carrossel do item.

Desenvolvimentos

O carrossel no Bootstrap possui 2 eventos para aplicar a funcionalidade. Ambos os eventos têm as seguintes propriedades adicionais:

direção: A direção na qual os slides se movem ("esquerda" ou "direita").
relatedTarget: O elemento DOM que se move para a posição do slide "invertido".
from: O índice do slide atual
para: Índice do próximo slide

Todos os eventos de carrossel são disparados diretamente no carrossel (ou seja, em

$("#meuCarrossel" ). on ("slide.bs.carousel" , function () ( // faça algo… ))

Bom dia a todos que desejam aprender algo novo com os elementos do framework Bootstrap. O tópico de hoje é o slider Bootstrap Carousel. Este é um elemento popular que está presente em quase todos os sites.

Portanto, vou lhe dizer como criar um controle deslizante de carrossel, quais ferramentas internas são necessárias para isso, como você pode configurar os parâmetros e, no final do artigo, mostrarei a implementação de um exemplo específico. E agora mãos à obra!

Tudo sobre ferramentas de plug-in de carrossel do Bootstrap

Uma galeria de fotos em carrossel é usada para apresentar novas ofertas, produtos, uma lista de promoções atuais, visualização conveniente do portfólio, etc. Portanto, hoje é importante poder trabalhar com este plugin sob nome oficial Plugin Bootstrap Carrossel.

Deve-se notar imediatamente que o elemento descrito não tem suporte adequado no Internet Explorer 9 e em versões anteriores. No entanto, funciona muito bem (para WordPress, Joomla! e outros mecanismos, conectar o framework é bastante simples).

Para operar facilmente com todos os parâmetros e personalizar rapidamente o controle deslizante, você precisa aprender as principais classes internas do Bootstrap 3.

Classe	propósito
carrossel	Cria o próprio controle deslizante Carrossel.
deslizar	Adiciona com css o efeito de animação e transições ao alternar entre slides. A aula é opcional.
indicadores de carrossel	Adiciona, por assim dizer, um painel de controle na forma de pequenos pontos na parte inferior de cada imagem, pelo qual você pode alternar rapidamente para qualquer imagem. A aula é opcional.
interior de carrossel	Adiciona os próprios slides à galeria.
legenda do carrossel	Responsável pela assinatura de arquivos gráficos. Pode ser incluído conforme desejado.
item	Define um conjunto de conteúdo para cada slide.
Controle de carrossel direito/esquerdo	Adiciona os botões direito e esquerdo de acordo com o nome para alternar entre os quadros.

Além disso, vale a pena conhecer outras características do layout de tais galerias.

Para começar, criar o próprio bloco Carrossel requer uma declaração id="meuCarrossel" para o correto funcionamento deste último.

Na mesma div, você precisa registrar o atributo data-ride="carrossel", que especifica que a animação deve ser carregada assim que a página for carregada.

Agora vamos para os indicadores. Cada tag li deve ter alguns atributos: alvo de dados, que aponta para o ID de um carrossel específico, e dados-slide-to, que determina para qual número de quadro ir.

Quanto aos botões que alternam imagens para frente ou para trás, para implementá-los, vale registrar o atributo slide de dados com a palavra-chave "prev" ou "next".

Agora você conhece os elementos básicos da estrutura, graças aos quais você pode editar a exibição do controle deslizante de uma determinada maneira. Naturalmente, você pode desativar a rolagem automática de quadros, legendas de imagens ou botões laterais.

Mecanismos de controle alternativos

Além de usar as classes internas do Bootstrap, você também pode olhar para . Portanto, existem muitos métodos e opções em JS que implementam todas as mesmas ações, apenas através da ferramenta $.carousel(). Entre eles podem ser listados como:

Teste de conhecimento

Bem, agora é hora de verificar como você aprendeu o material e consolidar o conhecimento adquirido. Para fazer isso, descreverei cada ação que você precisará realizar no caminho para criar o "Carrossel".

Primeiro você precisa incluir os scripts e estilos necessários. Eu prefiro, mas você pode baixar o framework no site oficial ( http://getbootstrap.com/) e coloque os arquivos baixados na raiz do diretório do projeto.

Se você concorda comigo, no cabeçalho do documento escrevemos:

1 2 3

Se você é um defensor do segundo método, em vez da primeira parte do link, você precisa inserir o caminho para o arquivo.

Agora resta implementar no controle deslizante. Para fazer isso, use seu conhecimento adquirido e escreva as partes de código necessárias em ordem:

abertura de bloco comum responsável pelo instrumento descrito;
um bloco para especificar indicadores de controle;
bloco para os próprios slides;
implementação de botões laterais.

Apenas o segundo e o último divs podem ser excluídos desta lista.

Agora você está definitivamente pronto para escrever código.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

Exemplo de galeria de carrossel

/*Cria o bloco principal*/

/*Preenchendo slides*/

Exemplo de galeria de carrossel

/*Cria o bloco principal*/

/*Indica 4 indicadores de acordo com o número de imagens*/ /*Preenche os slides*/ /*Cria botões de controle laterais*/

Um componente de apresentação de slides para iteração por meio de elementos de imagem ou slides de texto em carrossel. Em navegadores que suportam a API de visibilidade de página , o carrossel evitará a troca de slides quando as páginas da web não estiverem visíveis para o usuário (por exemplo, quando o navegador estiver inativo, a janela do navegador estiver minimizada etc.). Carrosséis aninhados não são suportados.

Exemplo

Animações não são suportadas no Internet Explorer 9

O Bootstrap usa exclusivamente CSS3 para animação, mas o Internet Explorer 9 não oferece suporte às propriedades CSS necessárias. Portanto, não há animação de transição de slides ao usar este navegador. Optamos deliberadamente por não incluir fallbacks baseados em jQuery para transições.

Elemento ativo inicial necessário

A classe .active deve ser adicionada a um dos slides. Caso contrário, os carrosséis não serão visíveis.

Títulos adicionais

Adicione facilmente legendas aos seus slides com um elemento .carousel-caption em qualquer .carousel-item . Coloque apenas sobre HTML extra lá e ele irá alinhar e formatar automaticamente.

rótulo do primeiro slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

rótulo do segundo slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

terceiro rótulo de slide

Praesent comodo cursus magna, vel scelerisque nisl consectetur.

...

Problema de acessibilidade

O componente carrossel não atende aos padrões de acessibilidade. Se você precisar de compatibilidade, considere outras formas de apresentar seu Conteúdo.

Uso

Vários carrosséis

Os carrosséis exigem o uso de um id no contêiner mais externo (em .carousel) para gerenciar o carrossel e funcionar corretamente. Ao adicionar vários carrosséis ou ao alterar o ID do carrossel , certifique-se de atualizar os controles correspondentes.

Com esses atributos

Usando atributos de dados, é fácil controlar a posição do carrossel. data-slide pode ser solicitado por prev ou next , que altera a posição do slider em relação à sua posição atual. Como alternativa, use data-slide-to para passar o índice do slide de carrossel bruto para data-slide-to="2" , que compensa a posição do slide com definições de índice começando em 0 .

O atributo data-ride="carousel" é usado para designar o carrossel como uma animação a partir do carregamento da página. Ele não pode ser usado em conjunto com a inicialização JavaScript (desnecessariamente) explícita do mesmo carrossel.