CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Marcus Bristow
Marcus Bristow

Reputation: 137

carousel not displaying images using background css

Having a bit of an issue with a slider i'm trying to put together and I can't exactly figure out why. Hoping somebody might be able to point out what is most likely something stupidly simple.

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

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

#slide3 {
    background: url('../../images/captainShield.jpg') top center no-repeat;
}
<?php include('header.php') ?>

        <div class="container" id="main">

            <div class="carousel slide" id="myCarousel">
               
               <!-- Indicators -->
               <ol class="carousel-indicators">
                   <li class="active" data-target="#myCarousel" data-slide-to="0" ></li>
                   <li data-target="#myCarousel" data-slide-to="1"></li>
                   <li data-target="#myCarousel" data-slide-to="2"></li>
               </ol><!-- end carousel-indicators -->
               
                <div class="carousel-inner">
                    <div class="item active" id="slide1">
                        <div class="carousel-caption">
                            <h4>Richmond Movie Club</h4>
                            <p>A movie club for movie enthusiasts</p>
                        </div><!-- end carousel-caption -->
                    </div><!-- end item -->
                    <div class="item" id="slide2">
                        <div class="carousel-caption">
                            <h4>Weekly Movie Screenings</h4>
                            <p>Richmond Movie Club hosts a weekly movie night playing movies based on member uploads and ratings</p>
                        </div><!-- end carousel-caption -->
                    </div><!-- end item -->
                    <div class="item" id="slide3">
                        <div class="carousel-caption">
                            <h4>Memberships open to public</h4>
                            <p>If you would like to know how to become a member use any of the contact options on the page</p>
                        </div><!-- end carousel-caption -->
                    </div><!-- end item -->
                </div>
                <!-- end carousel-inner -->
                
                <!-- Controls -->
                <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a>
                <a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="icon-next"></span></a>
            </div>
            <!-- end myCarousel -->

before someone asks if I have linked my js and bootstrap files correctly yes I have. The template and files are copied over from a pre-existing project that is working properly.

If I modify the css in any way to do the background images then the slider will show up and works perfectly fine. However as soon as I refresh the page the slider disappears and I can't get it back again unless I change the css.

For example:

If I change #slide1 to a background-image: then immediately change it back to background: then the slider will appear on my page.

I'm a little confused as to why it is doing this.

Any help is appreciated thankyou.

Upvotes: 0

Views: 826

Answers (1)

neophyte
neophyte

Reputation: 6626

First of all you missed the data-ride="carousel" attribute which is responsible for the animation part.

You can use<img> tag inside <div class="item" ></div> to getting it work properly. If you want your carousel images as backgroung-image to have some text or something like that to appear above it you can put anything inside <div class="carousel-caption"></div> that will make your carousel image look like a background-image.

Here is the working example--

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


</head>
<body>


        <div class="container" id="main">

            <div class="carousel slide" id="myCarousel" data-ride="carousel">
               
               <!-- Indicators -->
               <ol class="carousel-indicators">
                   <li class="active" data-target="#myCarousel" data-slide-to="0" ></li>
                   <li data-target="#myCarousel" data-slide-to="1"></li>
                   <li data-target="#myCarousel" data-slide-to="2"></li>
               </ol><!-- end carousel-indicators -->
               
                <div class="carousel-inner">
                    <div class="item active" id="slide1">
                       
                        <img src='http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg'>
                      <div class="carousel-caption">
                            <h4>Richmond Movie Club</h4>
                            <p>A movie club for movie enthusiasts</p>
                        </div>
                        <!-- end carousel-caption -->
                    </div><!-- end item -->
                    <div class="item" id="slide2">
                     <img src='http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg'>
                        <div class="carousel-caption">
                            <h4>Weekly Movie Screenings</h4>
                            <p>Richmond Movie Club hosts a weekly movie night playing movies based on member uploads and ratings</p>
                        </div><!-- end carousel-caption -->
                    </div><!-- end item -->
                    <div class="item" id="slide3">
                     <img src='http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg'>
                        <div class="carousel-caption">
                            <h4>Memberships open to public</h4>
                            <p>If you would like to know how to become a member use any of the contact options on the page</p>
                        </div><!-- end carousel-caption -->
                    </div><!-- end item -->
                </div>
                <!-- end carousel-inner -->
                
                <!-- Controls -->
                <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a>
                <a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="icon-next"></span></a>
            </div>
            <!-- end myCarousel -->
</body>

</html>
Hope this helps!

EDIT

As mentioned by Markus in the comment the bootstrap-carousel does work with background-image(which I had never used before). So my above answer works fine but if you want to use it with background-img css property you can do that also. Thanks Markus!

Upvotes: 1

Related Questions