Jump to content
welington.miranda

script JS dinamicamente

Recommended Posts

pessoal, é o seguinte preciso desse SCRIPT funcione para todos os carousels que tenho que as devidas configurações e conteudos vem do banco de dados.
a função desse script e esconder as setas do carousel e exibir, quando for inicio e quando for final.
O problema que quando clico em qualquer seta ele movimenta todos ao mesmo tempo.

Queria ajuda de voces para ajustar isso?!?        

 

$('.carousel').carousel({
             interval: false,
         })

         $('.carousel').ready(function () { 
             checkitem();
         });

         $('.carousel').on('slid.bs.carousel', checkitem);

         function checkitem()  
         {
             var $this = $('.carousel');                          
                if($('.carousel-inner .carousel-item:eq(0)') .hasClass('active')) {
                 // Hide left arrow
                 $('.carousel-control-prev', document).hide();
                 // But show right arrow
                 $('.carousel-control-next', document).show();
                      
             } else if ($('.carousel-inner .carousel-item:last').last().hasClass('carousel-item')) {
                 // Hide right arrow
                 $('.carousel-control-prev' , document).show();
                 // But show left arrow
                 $('.carousel-control-next' , document).hide();
             } else {
                 $('.carousel-control-prev, .carousel-control-next', $this).show();
             }
         }

Share this post


Link to post
Share on other sites

Pelo que entendi, o problema é que está alterando todos os items que possuem a classe $('.carousel-control-prev'). Você precisará especificar ao JS em qual carousel você está mexendo. Talvez na função checkitem() você possa fazer uma varredura nos itens filhos, algo como:

 

function checkitem(elemnt)  {
  elemnt.find(...)
}

 

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 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>  
    • By 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
    • By 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>  
    • By 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
    • By 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 ?
×

Important Information

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