Results 1 to 1 of 1

Thread: BS3 won't update slides within carousel

  1. #1
    Junior Member
    Join Date
    Jun 2014
    Posts
    1

    Unhappy Solved: BS3 won't update slides within carousel

    (Note: I solved this myself)

    Hello,

    New to Bootstrap and forum but will attempt to follow posting rules:

    Problem: created my own slides for Bootstrap 3 carousel. Named them as original slides were named. Worked okay. However, decided to update slides (remade them with different graphics). Now, although I've replaced old graphic slides, the continue to show up in my carousel rather than showing the new slides. I am about to try updating the names of the slides and changing the CSS to reflect the new names. I hope this will correct the problem but I desperately need help with this. I have my entire site done and plan to show this later this morning and now this last problem is holding up everything.

    Any ideas?


    HTML:

    <div class="carousel slide" id="myCarousel">

    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
    <li data-slide-to="1" data-target="#myCarousel"></li>
    <li data-slide-to="2" data-target="#myCarousel"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <div class="item active" id="slide1">
    </div><!-- end item -->

    <div class="item" id="slide2">
    </div><!-- end item -->

    <div class="item" id="slide3">

    </div><!-- end item -->
    </div><!-- carousel-inner -->

    <!-- Controls -->
    <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
    <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>

    </div><!-- end myCarousel -->


    CSS:

    /* --------------------------------------
    Carousel
    -------------------------------------- */

    #myCarousel {
    margin-top: 60px;
    }

    .carousel .item {
    line-height: 300px;
    overflow: hidden;
    max-height: 300px;
    }

    .carousel-caption {
    font-size: 24px;
    }

    .carousel-caption h4 {
    font-size: 32px;
    }

    #myCarousel .item {
    height: 300px;
    }

    #slide1 {
    background: url('../../images/carousel_medium_01.jpg') top center no-repeat;
    }

    #slide2 {
    background: url('../../images/carousel_medium_02.jpg') top center no-repeat;
    }

    #slide3 {
    background: url('../../images/carousel_medium_03.jpg') top center no-repeat;
    }

    /* Landscape phone to portrait tablet */

    @media (max-width: 768px) {

    #myCarousel .item { height: 300px; }

    #slide1 {
    background: url('../../images/carousel_small_01.jpg') top center no-repeat;
    }

    #slide2 {
    background: url('../../images/carousel_small_02.jpg') top center no-repeat;
    }

    #slide3 {
    background: url('../../images/carousel_small_03.jpg') top center no-repeat;
    }

    .carousel-caption {
    font-size: 16px;
    }

    .carousel-caption h4 {
    font-size: 22px;
    }

    }

    /* Large desktop */
    @media (min-width: 1200px) {

    #myCarousel .item { height: 300px; }

    #slide1 {
    background: url('../../images/carousel_large_01.jpg') top center no-repeat;
    }

    #slide2 {
    background: url('../../images/carousel_large_02.jpg') top center no-repeat;
    }

    #slide3 {
    background: url('../../images/carousel_large_03.jpg') top center no-repeat;
    }

    }
    Last edited by lastevns; 06-21-2014 at 12:05 AM. Reason: Solved

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •