javascriptcsscarouseldjango-bootstrap3

Carousel Caption won't go away when it changes slide bootstrap


Hello I am new to boot strap and am making a carousel for my landing page. In each side is a container that holds a carousel-caption which then has some text and some links. When the slides change the first slide text and links stay static and overlap onto the next image and the image after that. The images change fine and the the carousel-caption for the other slides disappear okay but the first one wont leave. Here is a link to some of my code https://jsfiddle.net/marvstah/t5brxcnk/9/ any help or point to the right direction is appreciated, this has been driving me crazy for hours.

link to jsfiddle: https://jsfiddle.net/marvstah/t5brxcnk/9/


Solution

  • The issue is in your css... The 'opacity:1' is overriding what carousel is trying to do. Comment that out and it will get you started.

    .carousel.fade .item:first-child {
        top: auto;
        opacity: 1;
        position: relative;
    }