CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-4
Warda
Warda

Reputation: 108

Bootstrap carousel not working (Its not sliding)

<link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCar" class="carousel slide" data-ride="carousel" style="height: 100%;" >
    <!-- Wrapper for slides -->
    <div id="myNewCar" class="carousel-inner" style="height: 100%; ">
       <div class="item active">
            <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
        </div>

        <div class="item">
            <img src="~/assets/images/sidebar-1.jpg" class="img-responsive" />
        </div>

        <div class="item">
            <img src="~/assets/images/sidebar-5.jpg" class="img-responsive" />
        </div>
    </div>

</div>
<script src="~/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="~/assets/js/core/bootstrap.min.js"></script>

I am using bootstrap carousel in my asp.net mvc partial view but the images in the slider are not sliding it only displays the first image

Upvotes: 1

Views: 2727

Answers (1)

Robert
Robert

Reputation: 6967

Bootstrap 4 changed .item to .carousel-item. Update your HTML to reflect migration from BS3 to BS4 and your carousel will work as expected. So change:

<div class="item active">
  <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>

to:

<div class="carousel-item active">
  <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>

And repeat for each iteration of your slides. For additional information on Bootstrap 4s Carousel component reference the documentation for the current version (4.0.0-beta2):

https://getbootstrap.com/docs/4.0/components/carousel/

Upvotes: 2

Related Questions