Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

banner tipo carrossel automatico

Por thiago wendel, Setembro 19, 2019 em Desenvolvimento frontend

Recommended Posts

thiago wendel 0

Denunciar post

Postado Setembro 19, 2019

boa tarde, sou novo na área e estou com um problema no site que preciso colocar o banner da home em modo carrossel automático para mudar sozinho

o site e www.edicoescnbb.com.br , segue em anexo também a imagem

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sherlock02 0

Denunciar post

Postado Outubro 3, 2019

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!

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ir para a lista de tópicos Desenvolvimento frontend

- PHP+Codeigniter - Adicionar Registro Plano de Contas
  
  Por violin101, Novembro 20 em PHP
- Javascript - Passar Parâmetros para uma Função.
  
  Por violin101, Outubro 28 em Javascript
- PHP - Consulta MySql para prazo de dias
  
  Por violin101, Novembro 17 em PHP

Conteúdo Similar
- Banner em POPUP
  Por guialacerda
  
  Alguem me recomenda um plugin para colocar popups no wordpress? Vou usar imagens, tipo vou por uns 4 banners popup aleatórios.
- Banner Rotativo
  Por 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>
- erro ao publicar banner html em site
  Por 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></style>
  PRINT dele publicado:
  
  Exemplo de como deve ficar:
  
  espero que consigam me ajudar, ontem pesquisei muito sobre isso, e nao encontrei nada.
  
  valeu
- Carrosel de imagens no navegador do celular abre com mais espaço.
  Por 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
- Me ajude a colocar um banner no codigo css
  Por 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;
  }

Entrar

Arquivado

banner tipo carrossel automatico

Recommended Posts

thiago wendel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sherlock02 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante