如何在 Blazor 中使用 Bootstrap Carousel
Blazor 的新手。需要尝试如何在 Blazor 中使用 BS carousel。
我在默认 Blazor 应用程序中使用了以下代码。但它不起作用。我需要做什么？
谢谢
我在 Index.html 中添加了这一行
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
在计数器页面中。我添加了以下内容：
<div class="容器">
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<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>
-- 更新：Index.html
<!DOCTYPE html>
<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>
<body>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html >
dan*_*era 13
Carousel 需要一些 javascript 代码，需要在页面加载时进行配置，但是，在 blazor 页面中，没有人调用组件的初始化。好消息是您可以通过代码来完成。
三个简单的步骤：
1.-在blazor上创建并包含javascript（您可以将此代码复制粘贴到index.html页面底部）
<script>
window.initializeCarousel = () =>
{
$('#carouselExampleIndicators').carousel({interval: 2000});
//see step 2 to understand these news id's:
$('#carouselExampleIndicators-prev').click (
() => $('#carouselExampleIndicators').carousel('prev') );
$('#carouselExampleIndicators-next').click (
() => $('#carouselExampleIndicators').carousel('next') );
}
</script>
2.- 稍微改变一下旋转木马html（href从carousel-control-prevdiv 中删除。添加一个idfor prev 和 next 控件）：
<div id="carouselExampleIndicators"
class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-50" src="..." alt="Pepa Pig">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="..." alt="Sponge Bob">
</div>
</div>
<a id="carouselExampleIndicators-prev"
class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="carouselExampleIndicators-next"
class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
3.- 在第一次渲染后调用前面的代码：
@page "/counter"
@inject IJSRuntime JsRuntime;
...
@functions {
int currentCount = 0;
bool firstRender = true;
...
protected async override Task OnAfterRenderAsync()
{
if (firstRender)
{
await JsRuntime.InvokeAsync<object>("initializeCarousel");
firstRender=false;
}
}
就这样：
如果您的旋转木马现在正在移动，请告诉我们！
已编辑
请记住在 index.html 上包含运行 bootstrap carousel 所需的所有 js：
<body>
<app>Loading...</app>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>
window.initializeCarousel = () =>
{
$('#carouselExampleIndicators').carousel({interval: 2000})
$('#carouselExampleIndicators-prev').click (
() => $('#carouselExampleIndicators').carousel('prev') );
$('#carouselExampleIndicators-next').click (
() => $('#carouselExampleIndicators').carousel('next') );
}
</script>
</body>
| 归档时间： |
|
| 查看次数： |
11890 次 |
| 最近记录： |