Pesquisar na Comunidade
Mostrando resultados para as tags ''carousel''.
Encontrado 2 registros
-
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(); } }
-
Corousel Bootstrap pequeno em altura no celular
DinhoPHP postou um tópico no fórum Desenvolvimento frontend
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>
