Blazor Wasm - Criando um Carousel

  Neste artigo veremos como criar um carousel em um projeto Blazor WebAssembly de forma bem simples.

Também conhecidos como controles deslizantes, galerias e apresentações de slides, os carrosséis da Web permitem exibir texto, gráficos, imagens e até mesmo vídeos em um bloco “deslizante” interativo.

Desta forma os carrosséis são uma ótima opção de design para agrupar conteúdo e ideias — permitindo que você forme relacionamentos visuais entre partes específicas do conteúdo.

Neste artigo veremos como criar um carousel em um projeto Blazor WebAssembly criado no  .NET 7 e usando o carousel do Bootstrap 5.1.

Criando a aplicação : BlazorCarousel

Vamos abrir o Visual Studio 2022 clicar em Create a new Project e selecionar o template Blazor WebAssembly app :

Informe o nome BlazorCarousel e defina as seguintes configurações:

Vamos limpar os componentes criados por padrão que não vamos usar em nosso projeto.

A seguir vamos incluir no arquivo Index.html uma referência ao script :

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

E a seguir vamos criar a função javascript startCarousel() :

<script type="text/javascript">
  function startCarousel(carouselId) {
     var myCarousel = document.getElementById(carouselId);
     var carousel = new bootstrap.Carousel(myCarousel);
     carousel.cycle(); // faz com que o carousel inicie imediatamente
  }
</script>

A seguir temos o  código completo do arquivo Index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorCarousel</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="BlazorCarousel.styles.css" rel="stylesheet" />
    <script type="text/javascript">
        function startCarousel(carouselId) { // NOTE: this JavaScript function added
            var myCarousel = document.getElementById(carouselId);
            var carousel = new bootstrap.Carousel(myCarousel);
            carousel.cycle(); // NOTE: this will cause the carousel to start immediately
        }
    </script>
</head>
<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Criando o componente Carousel.razor

Vamos agora criar na pasta Pages o componente Carousel.razor :
@page "/carousel"
@inject IJSRuntime JSRuntime

<h3>Carousel</h3>
<!-- NOTE: the data-bs- attributes added as per the Bootstrap v5.1 instructions -->
<div id="@carouselName" class="carousel slide" data-bs-ride="carousel" data-bs-wrap="true" data-bs-interval="2000" data-bs-pause="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/id/196/1920/1080" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/1057/1920/1080" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/1067/1920/1080" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

@code {
const string carouselName = "carouselExampleIndicators"; // NOTE: the ID of the carousel

protected override async Task OnAfterRenderAsync(bool firstRender)
{
object[] args = { carouselName };
await JSRuntime.InvokeVoidAsync("startCarousel", args); // NOTE: call JavaScript function with the ID of the carousel
}
}

A seguir vamos ajustar o componente NavMenu.razor para exibir o menu para exibir o carousel:

...
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
  <nav class="flex-column">
     <div class="nav-item px-3">
       <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
         <span class="oi oi-home" aria-hidden="true"></span> Home
       </NavLink>
     </div>
     <div class="nav-item px-3">
        <NavLink class="nav-link" href="carousel">
            <span class="oi oi-plus" aria-hidden="true"></span> Carousel
        </NavLink>
     </div>
   </nav>
</div>
...

No componente Index.razor vamos incluir o código abaixo que vai exibir a imagem carousel1.jpg da pasta wwwroot do projeto:

@page "/"

<PageTitle>Index</PageTitle>

<h3>Carousel</h3>

<img src="/carousel1.jpg" />

 

Executando o projeto iremos obter o seguinte resultado:

Pegue o projeto aqui:  BlazorCarousel.zip

"Eu sou o Alfa e o Ômega, o princípio e o fim, o primeiro e o derradeiro.
Bem-aventurados aqueles que guardam os seus mandamentos, para que tenham direito à árvore da vida, e possam entrar na cidade pelas portas."
Apocalipse 22:13-14

Referências:

José Carlos Macoratti