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
