Apresentação de slides em carrossel de inicialização múltipla

Como adiciono o controle deslizante de apresentação de slides em carrossel de Bootstrap em uma única página ou em uma página?

Neste tutorial, estamos fornecendo uma amostra de código-fonte funcional. Primeiro, baixe o código de exemplo usando o botão Download Code na parte inferior da página.

Adicionar e criar vários controles deslizantes de carrossel de bootstrap na página é tão fácil e simples.

Então, vamos começar com o código de exemplo.

Após a conclusão do download do código-fonte, você receberá um arquivo zip “multiple-bootstrap-carousels.zip”. Extraia o arquivo zip em qualquer lugar no sistema de computador local.

Após a extração, você encontra um diretório chamado “multiple-bootstrap-carousels”, nesse diretório você obterá os seguintes ativos:

1. Diretório CSS
2. Diretório de fontes
3. Diretório de imagens
4. Diretório JS
5. Diretório CSS
6. Arquivo HTML – multiple-bootstrap-carousels.html

Quais são esses atestados?

Esses ativos são necessários para criar um bootstrap de vários controles deslizantes de carrossel.

• O diretório CSS contém um arquivo “bootstrap.min.css” que é usado para projetar páginas HTML responsivas.
• O diretório de fontes é usado pelo CSS bootstrap para gerar os vários ícones gráficos construídos. Controle de navegação de setas deslizantes de carrossel também gerado por isso. Você pode verificar aqui.
• O diretório de imagens contém todas as imagens que usaremos nos slides do carrossel.
• O diretório JS contém 2 arquivos js “jquery.min.js” e “bootstrap.min.js”. um arquivo jquery.min.js é uma biblioteca JavaScript com o objetivo de jquery usar JavaScript em sites. um arquivo bootstrap.min.js é um arquivo de biblioteca bootstrap framework js que é usado para criar carrosséis de bootstrap, formulários de modelos, dicas de ferramentas, guias etc. O arquivo bootstrap.min.js depende do arquivo jquery.min.js, você precisa carregar primeiro antes de usar bootstrap js. Você pode explorar mais sobre o arquivo de biblioteca bootstrap js aqui.
• O arquivo HTML (multiple-bootstrap-carousels.html) contém todo o design e parte do código de vários controles deslizantes de carrossel.

vamos aprender mais sobre o arquivo multiple-bootstrap-carousels.html.

Você deve abrir o arquivo HTML em qualquer editor de código. Se você não tiver nenhuma ferramenta de editor de código instalada no computador, aqui estão algumas ferramentas de editor de código de taxa, baixe e instale qualquer ferramenta de editor de código:

Na seção Head, carregamos todos os arquivos CSS e js necessários e quatro códigos JS de carrossel conforme abaixo:

Código

 <cabeça>
 <title>Exemplo de apresentação de slides em carrossel de inicialização múltipla</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- biblioteca CSS bootstrap -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- biblioteca mais recente do jQuery (carregue esta biblioteca primeiro) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- biblioteca bootstrap js -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- carrossel personalizando código css -->
 <estilo>
 .carrossel {
 /* você pode adicionar customização de CSS aqui como largura da altura do slider */
 }
 </style>
 
 <!-- código js do carrossel -->
 <script>

 /* primeira apresentação de slides em carrossel */
 $('#carousel-1').carousel({
      // Quantidade de tempo para atraso entre o deslizamento do ciclo, Se falso, nenhum ciclo
      intervalo: 500,

      // Pausa o slide na entrada do mouse e continua na saída do mouse.
      pausa: "pairar",

      // Se o carrossel deve circular continuamente ou ter paradas bruscas.
      envoltório: verdade,

      // Se o carrossel deve reagir aos eventos do teclado.
      teclado: verdadeiro
 });
 
 
 /* segunda apresentação de slides do carrossel */
 $('#carousel-2').carousel({
      intervalo: 1000,
      envoltório: verdade,
      teclado: verdadeiro
 });
 
 
 /* terceira apresentação de slides do carrossel */
 $('#carousel-3').carousel({
     intervalo: 2000,
     envoltório: verdade,
     teclado: verdadeiro
 });
 
 
 /* quarta apresentação de slides em carrossel */
 $('#carousel-4').carousel({
     intervalo: 3000,
     envoltório: verdade,
     teclado: verdadeiro
 });
 </script>
 </head>

Na seção Corpo, estamos definindo os dois códigos HTML do carrossel. Agora, explicando o funcionamento do primeiro código deslizante. Dividimos uma classe de linha div em duas colunas usando a classe col-md-6. E na primeira coluna, adicionamos o código HTML do primeiro controle deslizante do carrossel, como abaixo.

 <div class="linha">
 <!-------------- início da primeira coluna -------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Carrossel Um</h3></center>
   <!-------------- início da primeira apresentação de slides do carrossel -------------->
   <div class="carousel slide" data-ride="carousel">
   <!-- slides com marcadores -->
   <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- wrapper para slides -->
   <div class="carousel-inner" role="listbox">
    
    <!-- slides 1 -->
    <div class="item ativo">
     <img src="images/girl-1.jpg" alt="Chania">
    </div>
 
    <!-- slides 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="Chania">
    </div>
 
    <!-- slides 3 -->
    <div class="item">
     <img src="images/girl-3.jpg" alt="Flor">
    </div>

   </div>

   <!-- setas de controle deslizantes para a esquerda e para a direita -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Próximo</span>
   </a>
  </div>
  <!-------------- fim da primeira apresentação de slides do carrossel -------------->
  </div>
 </div>
 <!-------------- fim da primeira coluna -------------->
</row>

Existem três partes do controle deslizante do carrossel no código HTML acima

• Balas deslizantes
• Slides de imagem
• Navegação deslizante

A seção Slider Bullets é construída usando a tag de lista de pedidos do HTML. <ol> usa uma classe chamada carousel-indicators , que é definida no arquivo CSS de bootstrap. E cada tag <li> tem um atributo data-target=”#carousel-1″ onde #carousel-1 é o mesmo ID que estamos usando no primeiro código js do carrossel no código de exemplo.

Slider Image Slides seção tem um div com um item de classe. Em cada uma dessas div, adicionamos uma tag de imagem para carregar a imagem do slide.

O Slider Navigation é usado para navegar pelos slides da imagem na direção esquerda ou direita. As setas de navegação são criadas por ícones gráficos bootstrap chamados Glyphicon . Os botões de navegação são agrupados na tag âncora <a> com a função de atributo de dados do carrossel de bootstrap e com a classe de controle de carrossel . Na tag <a> no atributo href , adicionamos o mesmo ID ( #carousel-1 ) que adicionamos antes na parte dos marcadores do controle deslizante. Esse ID é usado no código js da primeira apresentação de slides do carrossel para ativar a funcionalidade do primeiro controle deslizante no código HTML do primeiro controle deslizante.

Em nosso segundo código de controle deslizante, atribuímos outro ID #carousel-2 para todas as três partes do código de controle deslizante, como no código js do segundo controle deslizante, marcadores do segundo controle deslizante e código HTML de navegação.

Esperança! vocês acham que o código do tutorial e do exemplo é descritivo e está funcionando para você. Comentamos cada seção do código no exemplo, para que você possa entender facilmente cada código.

Pessoal, se você tiver uma sugestão sobre a linguagem do tutorial e o código de exemplo para download, escreva para nós em nosso e-mail. Nosso endereço de e-mail é awordpresslife{at}gmail{dot}com

Obrigado por ler, usar e apoiar este tutorial.

Encontre os links de Referências Úteis abaixo dos quais procuramos escrever este tutorial para você: