0

I've pasted my code for a bootstrap carousel below. It doesn't work, but I'm not sure why.

  <div id="carouseldiv" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouseldiv" data-slide-to="0" class="active"></li>
                    <li data-target="#carouseldiv" data-slide-to="1"></li>
                    <li data-target="#carouseldiv" data-slide-to="2"></li>
                    <li data-target="#carouseldiv" data-slide-to="3"></li>
                    <li data-target="#carouseldiv" data-slide-to="4"></li>
                    <li data-target="#carouseldiv" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/1.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/2.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/3.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/4.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/5.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/6.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#carouseldiv" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carouseldiv" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
speckledcarp
  • 6,196
  • 4
  • 22
  • 22
Rakesh Suthar
  • 11
  • 1
  • Welcome to StackOverflow. You'll usually get better answers if you say what you've tried and what you haven't. In this case, a smaller code sample would probably be easier to diagnose, as well as mentioning which version of Bootstrap you're using. – speckledcarp Oct 24 '18 at 11:32
  • Also, the first question anybody trying to help is going to ask is "Are you sure you imported the bootstrap resources correctly?" You'll save everybody time if you include a second snippet showing how you import the Bootstrap CSS and JavaScript, or at least mention that other Bootstrap elements on your page work fine. – speckledcarp Oct 24 '18 at 11:39

1 Answers1

0

I compared your code snippet to the one on bootstrap's website.

It looks like you're not using the classes on your div's and spans that Bootstrap needs.

For example you have <div class="item"> when the Boostrap documentation shows <div class="carousel-item">. I also noticed you using glyphicon chevron's when you should be using <span class="carousel-control-prev-icon" aria-hidden="true"></span> and <span class="carousel-control-next-icon" aria-hidden="true"></span>.

Basically, after verifying that Bootstrap is correctly imported, you're going to need to go through the Bootstrap documentation code snippet and your own line-by-line to make sure the CSS classes used are the same. You'll probably find it helpful to start with a 2-slide carousel, rather than a 6-slide carousel.

You didn't post what version of Bootstrap you're using, so I assumed version 4.1 (the latest stable version as I'm writing this).

speckledcarp
  • 6,196
  • 4
  • 22
  • 22