Question

Blazor中的新手。需要尝试如何在Blazor中使用BS轮播。

我在Default Blazor应用程序中使用了以下代码。但这行不通。我需要做什么？

谢谢

我在Index.html
中添加了这一行
在“计数器”页面中。我添加了以下内容：

<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>

-更新：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 &gt;

Answer 1

Carousel需要一些javascript代码，需要在页面加载时进行配置，但是在blazor页面中，没有人调用该组件的初始化。好消息是，您可以通过代码完成。

三个简单步骤：

1.-创建并包含javascript on blazor（您可以复制此代码，将其粘贴到auction_umbrella/apps页面的底部）

index.html

2.-稍微更改轮播的<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>（从html div中删除href。为上一个和下一个控件添加carousel-control-prev）：

id

3.-首次渲染后调用上一个代码：

<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>

仅此而已

让我们知道您的转盘是否正在移动！

已编辑

记住要包括在index.html上运行引导轮播所需的所有js：

@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;
      }
    }

Answer 2

我可以在不使用 JavaScript 的情况下在 blazor 中自动滚动轮播。我还让 prev 和 next 按钮工作，当用户点击 prev 或 next 时，它进入手动模式并自动停止滚动。您可以在 https://stackoverflow.com/a/67172349/9203434

查看我的解决方案

如何在Blazor中使用Bootstrap Carousel

2 个答案: