CODEWITHSUNDEEP
angularasp.net-corebootstrap-4carousel
SilverFish
SilverFish

Reputation: 1106

Bootstrap 4 carousel in Angular 8 Asp.net core project not changing images automatically

I am follwing this example and created this carousel. https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel The carousel is not switching images. So to say sometimes I click the arrow then it starts repeating, but other times does not even start. only works manually. I added data-interval="2000" as well but did not help. please guide

<div class="container">
        <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div id="demo" class="carousel slide" data-interval="2000" data-ride="carousel">

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

                        <!-- The slideshow -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="assets/Desert.jpg" width="1100" height="500">
                            </div>
                            <div class="carousel-item">
                                <img src="assets/Jellyfish.jpg" width="1100" height="500">
                            </div>
                            <div class="carousel-item">
                                <img src="assets/Lighthouse.jpg" width="1100" height="500">
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>
                    </div>
                </div>
            </div>
</div>

Also, added these references in index.html and index.cshtml file in head section in .Net

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 0

Views: 447

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18965

You need set interval for carrousel by javascript as

$(document).ready(function(){
  $('#demo').carousel({
    interval: 2000,
     cycle: true
  });
});

Upvotes: 0

Related Questions