Jump to content
thiago wendel

banner tipo carrossel automatico

Recommended Posts

Olá!

 

Onde você encontrou o tutorial para o slide? Geralmente no próprio site tem explicando. Pelo código do seu site, eu acredito que tenha sido o "Slick carousel"

 

Nesse caso, tente inserir esse código de auto play

 

<script>
  $('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});
</script>

 

Abraços!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Fernando Mello
      Olá boa tarde !
       
      Tenho um código em HTML que eu consegui colocar 2 imagens rotativas mas precisava de no mínimo 5... não estou conseguindo aumentar!
      Alguém poderia me ajudar?
       
      Segue o código.
      <section id="elemento-slider" class="intro-block full-slider no-sep cover-bg" data-selector="section" style="background: none 0% 0% repeat scroll rgb(221, 221, 221);"> <div id="carousel-full-header" class="carousel slide carousel-full" data-ride="carousel"> <div role="listbox" class="carousel-inner"> <div class="item"> <div class="container section-padding"> <div class="row"> <div class="col-md-12 editContent" data-selector=".col-md-12"> <img class="img-responsive center-block" src="https://blob.llimages.com/machine-user-images/Banner_Verdade-Letal-img-1588091-20190701125809.jpg" style="padding-bottom: 5%; width: auto; height: auto; border-radius: 0px; border-style: none; border-width: 1px;" alt="" data-selector="img" width="640" height="323"> </div> </div> </div> </div> <div class="item active"> <div class="container section-padding"> <div class="row"> <div class="col-md-12 editContent" data-selector=".col-md-12"> <img class="img-responsive center-block" src="https://blob.llimages.com/machine-user-images/Banner-Contagem-Regressiva-img-1588091-20190701125802.jpg" style="padding-bottom: 5%; width: auto; height: auto; border-radius: 0px; border-style: none; border-width: 1px;" alt="" data-selector="img" width="640" height="323"></div> </div></div></div></div></div></section> <a role="button" class="left carousel-control" href="#carousel-full-header" data-slide="prev"> <span class="arrow" data-selector=".carousel-control .arrow"></span> </a> <a role="button" class="right carousel-control" href="#carousel-full-header" data-slide="next"> <span class="arrow" data-selector=".carousel-control .arrow"></span> </a>  
    • By ianluis
      Procurei por toda a internet e não tem nada que ensine a como colocar propaganda dentro de um player de vídeo não e vídeo do youtube e sim player de vídeo no meu caso e de filme, estou construindo um site de filmes e animes e preciso colocar anúncios para poder pagar a hospedagem e melhorar a qualidade do site para ter mais acessos me ajudem por favor já procurei em toda internet e não tem niguem ensinando só videos de como colocar no youtube e não tem como já que eu não tenho nenhum vídeo armazenando no computador apenas links.
    • By wcordeiroo
      fala galera, sou aqui no forum e novo em html e css também, estou com um problema, espero que alguem consiga me ajudar
      ontem fiz meu primeiro código html/css para um banner de um site, ao visualizar o banner no navegador ele esta correto, mas quando eu publíco o código fonte na minha plataforma que gerenciar o site no espaço que ele deve aparecer, acaba se desconfigurando todo o arquivo, vou colar o codigo aqui e o print dele publicado para verem
       
      <div id=centro align="center"> <div class="container"> <div class="Banner Menu clearfix"> <a href="https://www.armazemk.com.br/tamanco-verniz-nude-0256" target="_blank" title="meu 35"><img src="https://www.armazemk.com.br/img/2019/05/banner/19360/tamanco.jpg" alt="tamanco"/> </a> <h1>meu 35.</h1> <h2>Frete Grátis Sul e Sudeste</h2> <h3>Tamanco Nude</h3> </div> </div> </div> <style><!-- @charset "utf-8"; /* CSS Document */ body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; } .container { width: 1180px; height: 277px; background-color: #F2F2F2; overflow: hidden; } h1 { position: absolute; font-family: times new Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight: lighter; font-size: 70px; text-align: center; margin-top: -250px; margin-left: 220px; color: #7F5428; } h2 { position: absolute; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: lighter; font-size: 18px; text-align: center; margin-top: -50px; margin-left: 200px; color: #7F5428; } h3 { position: absolute; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: lighter; font-size: 18px; text-align: center; margin-top: -50px; margin-left: 900px; color: #7F5428; } img { mix-blend-mode: multiply; width: 350px; height: 350px; margin-left: 400px; margin-top: -55px; } --></style>  
      PRINT dele publicado:

       
       
      Exemplo de como deve ficar:

       
       
      espero que consigam me ajudar, ontem pesquisei muito sobre isso, e nao encontrei nada.
       
      valeu
    • By rafabritodf
      Prezados,
       
      Estou com um problema chatinho no carrossel de imagens. Recentemente comecei a implementar esse carrossel e no browser do computador ele abri legal contudo no celular ele fica com um espaço logo depois da imagem. irei compartilhar o link aqui do GitHub, vocês irão visualizar normal no navegador, quando clica em inspecionar vocês irão visualizar ele com um espaço enorme abaixo da imagem.
       
      Link: https://almondhorizon.github.io/Atelie/
       
      Alguém com mais experiencia poderá me ajudar? 
       
      Agradeço a atenção de todos.
       
      Atenciosamente,
      Rafael Brito
    • By brunojs
      Boa tarde !! estou tentando colocar um banner nesse espaço branco que eu marquei 
      mais não estou conseguindo pois tem que colocar pelo codigo css eu não estou conseguindo alguém 
      pode me ajudar ? segue o codigo css logo abaixo da imagem 

       
      Codigo é esse 
       
      body

      background:url(images/bg.gif) repeat-y center #FFFFFF;
      margin:auto;
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-size:11px;
      color:#333333;
      }
      h1{
      font-size:15px;
      color:#6C0008;
      padding:5px;
      margin:3px;
      font-weight:normal;
      }
      h2{
      font-size:13px;
      color:#666666;
      margin:0px;
      padding:3px;
      }
      h3{
      font-size:14px;
      color:#666666;
      margin:0px;
      padding:3px;
      }
      h4{
      font-size:12px;
      color: #CE6700;
      margin:0px;
      padding:3px;
      font-weight:normal;
      }
      .clear {
      clear:both;
      overflow:hidden;
      height:4px;
      }
      #main_content{
      width:930px;
      height:auto;
      margin:auto;
      background-color:#FFFFFF;
      }
      #top_banner{
      width:930px;
      height:150px;
      background:url(images/banner.jpg) no-repeat center;
      }
      #center_banner{
      width:930px;
      height:200px;
      background:url(images/bannerinox.gif) no-repeat center;
      }
      #center_banner_content{
      width:400px;
      height:auto;
      float:left;
      padding:55px 0 0 20px;
      }
      #learn_more{
      width:400px;
      height:50px;
      clear:both;
      float:left;
      padding-top:10px;
      }
      #learn_more a{
      padding:6px;
      margin:0 0 0 80px;
      text-decoration:none;
      color:#000000;
      font-size:12px;
      border:1px  #CCCCCC solid;
      }
      #learn_more a:hover{
      padding:6px;
      margin:0 0 0 80px;
      color: #666666;
      border:1px  #999999 solid;
      }
      #page_content{
      width:930px;
      height:auto;
      background-color:#FFFFFF;
      }
      /*------top menu---------*/
      ul.menu {
      list-style-type:none; float:right; display:block; width:500px; height:18px; 
      clear:both; margin-top:100px; padding:0;}
      ul.menu li {
      display:inline;}
      a.nav:link, a.nav:visited {
      display:block; float:left; padding:4px 11px 0 11px; margin:0;width: auto; height:18px; text-align:center; line-height:20px; font-weight:bold; font-size:12px;
      text-decoration:none; color:#562231;}
      a.nav:hover {
      display:block; float:left; padding:4px 11px 0 11px; margin:0;width: auto; height:18px; text-align:center; line-height:20px;
      text-decoration:none;  color:#562231; border-bottom:1px #562231 dashed;}
      /*------left section-----*/
      #left_section{
      width:300px;
      float:left;
      padding:0 0 10px 30px;
      }
      .left_box_border{
      width:250px;
      height:auto;
      border:1px #CCCCCC solid;
      padding:2px;
      margin-top:15px;
      }
      .left_box{
      width:250px;
      height:auto;
      background:url(images/box.jpg) no-repeat top;
      padding-top:10px;
      }
      #login{
      padding:10px;
      }
      .input{
      width:140px;
      height:12px;
      font-size:10px;
      }
      .submit{
      float:right;
      margin-right:30px;
      margin-top:5px;
      }
      img.pic{
      float:left;
      padding:10px;
      }
      .title{
      font-size:14px;
      font-weight:bold;
      color:#7B0E10;
      }
      .title a{
      text-decoration:none;
      font-weight:bold;
      color:#7B0E10;
      }
      .content{
      padding:5px;
      text-align:justify;
      }
      /*------right section-----*/
      #right_section{
      width:600px;
      height:auto;
      float:left;
      }
      .right_box{
      margin:20px 10px 10px 0;
      }
      img.pic_border{
      float:left;
      padding:2px;
      margin-right:15px;
      border:1px solid #CCCCCC;
      }
      .title_small{
      font-size:12px;
      font-weight:bold;
      color: #000000;
      }
      #right_box_1{
      width:250px;
      height:280px;
      float:left;
      margin:10px 1px 10px 10px;
      border-right:3px #B3B5B8 solid;
      }
      #right_box_2{
      width:280px;
      height:280px;
      float:left;
      margin:10px 5px 10px 1px;
      padding-left:12px;
      border-left:1px  #CCCCCC solid;
      }
      .news_box{
      padding:10px 0 0 0;
      clear:both;
      }
      img.pic_news{
      float:left;
      padding:0px 10px 10px 10px;
      }
      .news_submenu{
      clear:both;
      float:left;
      padding-top:5px;
      margin-left:10px;
      border-bottom:1px #CCCCCC solid;
      }
      .news_link{
      float:left;
      padding-right:30px;
      }
      .news_link a{
      text-decoration:none;
      color:#999999;
      }
      .news_link a:hover{
      text-decoration:none;
      color:#000;
      }
      /*---------services---------*/
      ul.services {
      list-style-type:none; float:left; display:block; width:auto; height:20px; 
      margin:0px; padding:10px 0 0 2px;}
      ul.services li {
      display:inline;}
      a.nav_services:link, a.nav_services:visited {
      display:block; padding:1px 0 0 14px; margin:2px;width: auto; height: auto; text-align:left; line-height:17px;
      text-decoration:none; background:url(images/bullet.png) no-repeat left; color:#000;}
      a.nav_services:hover {
      display:block; padding:1px 0 0 14px; margin:2px;width:auto; height:auto; text-align:left; line-height:17px;
      text-decoration:none; background:url(images/bullet_a.png) no-repeat left; color:#000000;}
      /*-------footer-----*/
      #footer{
      width:930px;
      height:70px;
      clear:both;
      background-color:#D7D8D2;
      }
      #copyrights{
      width:350px;
      color: #666666; 
      font-size:10px;
      float:left;
      padding:10px;
      }
      #madeby{
      width:200px;
      height:60px;
      float:right;
      text-align:center;
      padding-top:10px;
      }
      #madeby a{
      text-decoration:none;
      color:#666666;
      }
      /*---------footer menu---------*/
      ul.footer_menu {
      list-style-type:none; float:left; display:block; width:auto; height: auto;  margin:0px; padding:3px 0 0 10px;}
      ul.footer_menu li {
      display:inline;}
      a.nav2:link, a.nav2:visited {
      display:block; float:left; padding:4px 0 0 5px; margin:2px;width: auto; height:20px; text-align:center; line-height:16px;
      text-decoration:none; color: #999999;}
      a.nav2:hover {
      display:block; float:left; padding:4px 0 0 5px; margin:2px;width:auto; height:20px; text-align:center; line-height:16px;
      text-decoration:none;color:#000000;}#main_content #page_content #right_section .right_box .content h2 {
          color: #F00;
      }
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.