locked
Bootstrap carousel not working in Blazor RRS feed

  • Question

  • User-1980778524 posted

    I just trying out bootstrap carousel.  I did the following base on the default Blazor app:

    1.Added jquery-3.40.min.js in folder : bootstrap

    2. added below in Index.html :
    <script src="css/bootstrap/jquery-3.4.0.min.js" type="text/javascript"></script>2.In Index.html

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>BlazorCarouselTest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="css/bootstrap/jquery-3.4.0.min.js" type="text/javascript"></script>
    </head>

    3. added the 3 images in Images folder under wwwroot


    4. replace the counter.razor with below:


    @page "/counter"

    <div class="container">
            <h2>Carousel Example</h2>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
     
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="/Images/la.jpg" alt="Los Angeles" style="width:100%;">
                    </div>
     
                    <div class="item">
                        <img src="/Images/chicago.jpg" alt="Chicago" style="width:100%;">
                    </div>
     
                    <div class="item">
                        <img src="/Images/ny.jpg" alt="New york" style="width:100%;">
                    </div>
                </div>
     
                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

    Problem:

    it showed all the 3 images in vertical position when it suppose to show a horizontal scrolling with image by image

    Can someone tell me what I need to do to get it worked?

    TIA

    Monday, June 10, 2019 1:32 PM

Answers

All replies