What is wrong with my Bootstrap carousel? Is it the wrong Bootstrap style/javascript file?

Question

Hi Dear Experts can you help me in the following issue? While trying to make slideshow using bootstrap I am facing two problems, 1. Slides are stacked beneath another. 2. Slides do not ride or slide from one side to other. 3. Next/Prev glyphicons not shown.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Besides, I included the latest bootstrap javascript links also. These links are placed just above the closing body tag. My code is given below.

<div id="my-slider" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- indicators dot nav -->
            <ol class="carousel-indicators">
                <li data-target="#my-slider" data-slide-to="0" class="active"></li>
                <li data-target="#my-slider" data-slide-to="1"></li>
                <li data-target="#my-slider" data-slide-to="2"></li>
            </ol>
            <!-- wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item-active">
                    <img src="images/background-2.jpg" alt="fruits" style="width: 100%"/>
                    <div class="carousel-caption">
                    <h1>This is first slide</h1>
                    </div>
                </div>
                <div class="item-active">
                    <img src="images/background-3.jpg" alt="fruits" style="width: 100%"/>
                    <div class="carousel-caption">
                    <h1>This is second slide</h1>
                    </div>
                </div>
                <div class="item-active">
                    <img src="images/background-4.jpg" alt="fruits" style="width: 100%"/>
                    <div class="carousel-caption">
                    <h1>This is third slide</h1>
                    </div>
                </div>
            </div>

            <!-- controls or next or prev buttons -->
            <a href="#my-slider" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a href="#my-slider" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>

I have included the script code in my question. Sorry the script code may not be included. I am giving it by editing my question. — user3527068, Jun 14 '18 at 04:17
Follow this example : https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp — Nikunj Kathrotiya, Jun 14 '18 at 05:25

Shalika Akalanka · Answer 1 · 2018-06-14T04:36:50.643

0

Your carousal items has the class item-active in each one of them. Replace item-active class with carousel-item class and set only the first item to active.

<div class="carousel-inner" role="listbox">

    <div class="carousel-item active">
       <img src="images/background-2.jpg" alt="fruits" style="width: 100%"/>
       <div class="carousel-caption">
         <h1>This is first slide</h1>
       </div>
    </div>

    <div class="carousel-item">
       <img src="images/background-3.jpg" alt="fruits" style="width: 100%"/>
       <div class="carousel-caption">
          <h1>This is second slide</h1>
        </div>
     </div>

     <div class="carousel-item">
         <img src="images/background-4.jpg" alt="fruits" style="width: 100%"/>
         <div class="carousel-caption">
            <h1>This is third slide</h1>
         </div>
     </div>

</div>

Also it looks like you have used Bootstrap 3 carousel, but you have loaded Bootstrap 4 CSS & JS. So please refer Bootstrap 4 carousel example here.

Icons not loading because of the class differences of Bootstrap 3 & 4. So please copy/paste the whole Bootstrap 4 example and edit it with your content.

edited Jun 14 '18 at 04:36

answered Jun 14 '18 at 04:21

Shalika Akalanka

179
8

Hi Shalika Akalanka, Thanks for notifying this mistake. It was due to copy paste. The suggestion of using carousel-item instead of only item helped me. Now the problem of stacking the images has gone. But the rest of the issues still there. – user3527068 Jun 14 '18 at 04:30
@user3527068 I edited the answer. Please use the Bootstrap 4 carousel instead of 3. – Shalika Akalanka Jun 14 '18 at 04:38
Hi again, It is working after changing accordingly your suggestion. You made it easy for me. Thanks a lot. Can you guide me in two more thing. 1. How can I fit the image height inside the div of carousel? It shows different height for different images. CSS property of height is not working. 2. Can you let me know how slideshow can be done fading instead of sliding from right to left? – user3527068 Jun 14 '18 at 04:57
(1) You have to do some CSS workaround for this. Try making the image as background image of the `item` div and give that dive a height. (2) Add ' carousel-fade' class to carousel. [reference](https://stackoverflow.com/a/50198428/5347621). Also I suggest you to use Slick Slider instead of Boostrap carousel. It has more features and customizations. – Shalika Akalanka Jun 14 '18 at 07:02
Again thanks a lot. I just googled about the Slick Slider. Yes it has more features and I will use it in future. Thanks again. – user3527068 Jun 15 '18 at 05:42

What is wrong with my Bootstrap carousel? Is it the wrong Bootstrap style/javascript file?

1 Answers1