-
Conteúdo Similar
-
Por DinhoPHP
Olá!
Tenho um carousel em Bootstrap que se ajusta automaticamente à página, porém no modo mobile fica muito pequeno. O carousel está direto no <body>. Segue o código.
O resultado pode ser visualizado em: http://equipenovainfo.com.br/_portifolio/br_informatica_tec/
<!-- CAROUSEL --> <div id="carousel_slide" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active bg-primary" data-target="#carousel_slide" data-slide-to="0"></li> <li class="bg-primary" data-target="#carousel_slide" data-slide-to="1"></li> <li class="bg-primary" data-slide-to="#carousel_slide" data-target-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid" src="_imagens/_slide/foto01.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição I</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto02.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição II</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto03.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição III</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> </div> <a class="carousel-control-prev" href="#carousel_slide" role="button" data-slide="prev"> <span class="carousel-control-prev-icon"></span> <span class="sr-only">Anterior</span> </a> <a class="carousel-control-next" role="button" data-slide="next" href="#carousel_slide"> <span class="carousel-control-next-icon"></span> <span class="sr-only">Avançar</span> </a> </div>
-
Por Thais Hoe
Bom dia estou desenvolvendo um site, mas tenho pouquíssima (quase nenhuma) noção de JS.
Preciso fazer um carrosel que mostre o nome de um cliente e a avaliação que ele deixou.
Com base nesse código consegui fazer algo que funcione:
O problema é que quando eu coloco o script js para aparecer a primeira avaliação (#wall-1), ao abrir a página ele direciona o navegador direto para a parte das avaliações, que no caso é no final da pagina, acima do rodapé. Sem o script, ele não aparece as avaliações... Tentei procurar um pouco sobre a propriedade window mas não consegui uma solução.
Se alguém tiver uma solução ou um outro código (de preferencia simples como esse), me ajudaria muito.
Obs: já coloquei o código no header, footer e em um arquivo separado .js
EDIT: Se alguém puder me dizer como setar um timer também para mudar sozinho de avaliação agradeço.
Obg
-
Por Marcos21
Estou criando uma galeria, na pagina inicial fica as thumbs, ao clicar em uma abre uma modal com todas as imagens daquela galeria. (Obs. ao salvar no db as imagens da galeria ex. "01" todas as imagens são salvas na mesma coluna e são separadas por "," 7172381372.jpg,3216382763.jpg...) Ao realizar o loop a galeria com as thumbs funciona perfeitamente. Ao clicar em uma thumb, abre o modal e nele todas as fotos atribuida aquele thumb "galeria" as imagens são mostradas pelo carousel bootstrap. No entanto apenas a ultima galeria add no db funciona o carousel (ex: add galeria 01, funciona tudo normalmente a galeria com carousel, add a galeria 02, essa funciona normalmente o carousel, no entanto o carousel da 01 para de funcionar.
<div class="row"> <?php while($rows = mysqli_fetch_assoc($resultado)){ $foto = rows['foto'];?> <div class="gallery_product col-md-3 col-sm-4 col-xs-12"> <a href="#" data-toggle="modal" data-target="#myModal<?php echo $rows['id_produto']; ?>" ><img src="uploads/thumb_<?php echo $foto; ?>" class="img-responsive"></a> </div> <div class="modal fade" id="myModal<?php echo $rows['id_produto']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" id="<?php echo $rows['id_produto']; ?>" > <div class="modal-content" > <div class="modal-body text-center pagination-centered"> <!----------------CAROUSEL------------------------> <?php $imagens_nome = $foto; $imagens=explode(',',$imagens_nome); ?> <!-- Indicators --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <?php $cont=0; foreach($imagens as $img){?> <li data-target="#carousel-example-generic" data-slide-to="<?php echo $cont;?>" class="<?php echo ($cont==0)?" active ":" ";?>"></li> <?php $cont++;} ?> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php $cont=0; foreach($imagens as $img){?> <div class="item <?php echo ($cont==0)?" active ":" ";?>"> <img src="uploads/<?php echo $img; ?>" width="100%"alt="..."> <div class="carousel-caption"> </div> </div> <?php $cont++; } ?> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="modal-header"> </div> <?php } ?> </div>
-
Por Lfmesquita
Estou com o seguinte problema:
Criei um código PHP que monta perfeitamente o carousel com o nome das imagens em meu banco de dados, porém o carousel fica congelado na primeira imagem, sei que é apenas um detalhe mas não estou conseguindo rodar.
<?php // Parte que chama o slider como o id das fotosextras $idp = $imovel; $sqls = mysql_query("SELECT * FROM imovelfotoextra WHERE idimovel='".$idp."' order by id desc LIMIT 16"); $numRegistros = mysql_num_rows($sqls); $contador = $numRegistros; ?> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <?php If ($numRegistros != 0){ // <!-- Indicators --> echo "<ol class=\"carousel-indicators\">"; $reg = 0; while ($dadoss=mysql_fetch_array($sqls)){ if ($contador == 1 || $reg == 0){ echo "<li data-target=\"#myCarousel\" data-slide-to=\"".$reg."\" class=\"active\"></li>"; $contador = $contador + 1; $reg = $reg + 1; } else { echo "<li data-target=\"#myCarousel\" data-slide-to=\"".$reg."\"></li>"; $contador = $contador + 1; $reg = $reg + 1; } } echo "</ol> <div class=\"carousel-inner\">"; $sqltris = mysql_query("SELECT * FROM imovelfotoextra WHERE idimovel='".$idp."' order by id asc LIMIT 16"); $flagtris = 0; while($dadostris=mysql_fetch_array($sqltris)){ if ($flagtris == 0){ echo "<div class=\"item active\"> <img src=\"paginas/midias/images/".$dadostris[foto]."\" Alt=\"".$dadostris[foto]."\" border=\"0\" /></div>"; } else { echo "<div class=\"item\"> <img src=\"paginas/midias/images/".$dadostris[foto]."\" Alt=\"".$dadostris[foto]."\" border=\"0\" /></div>"; } $flagtris = 1; } echo "</div>"; } else { echo "<ol class=\"carousel-indicators\">"; echo "<li data-target=\"#myCarousel\" data-slide-to=\"0\" class=\"active\"></li>"; echo "</ol> <div class=\"carousel-inner\">"; echo "<div class=\"item active\"><img src=\"paginas/thumbs.php?w=200&h=125&imagem=midias/images/".$mostra[foto]."\" border=\"0\"></div>"; echo "</div>"; } ?> <!-- Left and right controls --> <a class=\"left carousel-control\" href=\"#myCarousel\" 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=\"#myCarousel\" role=\"button\" data-slide=\"next\"> <span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\"></span> <span class=\"sr-only\">Próximo</span> </a> </div>Um exemplo do que ocorre pode ser localizado em http://www.forsterimoveis.com.br/index.php?p=imovel&id=1071 ao clicar no carousel ele não vai para a próxima imagem do imóvel.
Agradeço desde já.
Cordialmente.
Leandro Mesquita -
Por guilomaker
Boa tarde!
bom, estou precisando fazer um carousel, eu estou usando o jCarouselLite, ate então foi o mais simples que eu achei e que me atendeu! só que no decorrer das coisas me deparei com um problema, entrem nesta pagina.
http://catalogo.reidoaluminio.com.br/
veja que quando clica na seta, ele e aplicado pra todos blocos, eu precisaria que ele funcionasse só no bloco atual.
outra coisa a div que uso para a carousel e a .nav-produtos
$(".nav-produtos").jCarouselLite({ btnNext: ".arrow-right", btnPrev: ".arrow-left", }); }); ela se repete pra todos os blocos, como toda as utras divs,
o que acontece e que ali ela esta em dois blocos só, São jorge e Real. Se eu adicionar mais blocos com a div .nav-produtos, o bloco inteiro some, ta como se eu só pudesse usar em dois, por exemplo o havai.
qual a melhor maneira de implementar esse carousel ?
-
