admin管理员组文章数量:1399180
Index.razor:
@page "/"
@inject ChannelService ChannelService
@using EpgCare.Model
@using Microsoft.AspNetCore.Components.Web
@using System.Timers
@inject NavigationManager NavManager
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject IJSRuntime JSRuntime
<!-- Main Container -->
<div class="main-container">
<!-- Premier Section -->
@if (premireimges == null)
{
<p><em>Loading...</em></p>
}
else
{
<div class="custom-carousel">
<div class="carousel-inner">
@foreach (var x in _distinctPremiereImages)
{
@if (!string.IsNullOrEmpty(x.PremierImg))
{
<div class="carousel-item @(x == _distinctPremiereImages[CurrentIndex] ? "active" : "")">
<img src="@x.PremierImg" alt="Premier Image" @onerror="(e) => RemoveImage(x)" />
<div class="carousel-caption">
<h1>@x.PremierName</h1>
<p style="font-size:x-large">@x.PremierImg_Text</p>
</div>
</div>
}
}
</div>
<div class="carousel-controls">
<button @onclick="PreviousSlide"><strong><</strong></button>
<button @onclick="NextSlide"><strong>></strong></button>
</div>
<div class="carousel-indicators">
@for (int i = 0; i < _distinctPremiereImages.Count; i++)
{
<span class="indicator @(i == CurrentIndex ? "active" : "")" @onclick="() => GoToSlide(i)"></span>
}
</div>
</div>
}
</div>
@code {
private int CurrentIndex = 0;
private List<PremireImg> premireimges;
private List<PremireImg> _distinctPremiereImages = new();
private Timer _timer;
protected override async Task OnInitializedAsync()
{
var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
var user = authState.User;
if (!user.Identity?.IsAuthenticated ?? false)
{
NavManager.NavigateTo("/Identity/Account/Login");
}
try
{
premireimges = await ChannelService.GetPremireAsync();
UpdateDistinctPremiereImages();
if (premireimges != null && premireimges.Count > 0)
{
StartAutoSlide();
}
}
catch (Exception ex)
{
Console.WriteLine($"Error loading slider images: {ex.Message}");
}
}
private void UpdateDistinctPremiereImages()
{
_distinctPremiereImages = premireimges?
.DistinctBy(img => img.PremierImg)
.ToList() ?? new List<PremireImg>();
}
private void NextSlide()
{
if (_distinctPremiereImages.Count == 0) return;
CurrentIndex = (CurrentIndex + 1) % _distinctPremiereImages.Count;
InvokeAsync(StateHasChanged);
}
private void PreviousSlide()
{
if (_distinctPremiereImages.Count == 0) return;
CurrentIndex = (CurrentIndex - 1 + _distinctPremiereImages.Count) % _distinctPremiereImages.Count;
InvokeAsync(StateHasChanged);
}
private void GoToSlide(int index)
{
Console.WriteLine($"Navigating to slide {index}");
if (index >= 0 && index < _distinctPremiereImages.Count)
{
CurrentIndex = index;
InvokeAsync(StateHasChanged);
}
}
private void RemoveImage(PremireImg image)
{
premireimges.Remove(image);
UpdateDistinctPremiereImages();
// Adjust CurrentIndex if out of bounds
if (CurrentIndex >= _distinctPremiereImages.Count)
{
CurrentIndex = _distinctPremiereImages.Count > 0
? _distinctPremiereImages.Count - 1
: 0;
}
InvokeAsync(StateHasChanged);
}
private void StartAutoSlide()
{
_timer?.Dispose();
_timer = new Timer(80000);
_timer.Elapsed += (sender, e) => InvokeAsync(NextSlide);
_timer.Start();
}
public void Dispose()
{
_timer?.Dispose();
GC.SuppressFinalize(this);
}
}
<style>
.custom-carousel {
position: relative;
width: 100%;
max-width: 1500px;
margin: auto;
overflow: hidden;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
min-width: 100%;
transition: opacity 0.5s ease-in-out;
}
.carousel-item img {
width: 100%;
height: 800px;
object-fit: cover;
}
.carousel-item.active {
opacity: 1;
}
.carousel-item:not(.active) {
opacity: 0;
}
.carousel-caption {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
padding: 10px;
padding-right: 400px;
font-size: xx-large;
margin-bottom:50px;
}
.carousel-controls {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
gap: 12px;
margin-bottom:50px;
margin-right:50px;
}
.carousel-controls button {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 30px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-indicators {
position: absolute;
bottom: 10px;
width: 100%;
display: flex;
justify-content: left;
margin-bottom: 50px;
}
.carousel-indicators .indicator {
width: 60px;
height: 4px;
background-color: dimgrey;
margin: 0 5px;
cursor: pointer;
}
.carousel-indicators .indicator.active {
background-color: white;
}
</style>
ChannelService.cs:
public async Task<List<PremireImg>> GetPremireAsync()
{
var premireimgs = new List<PremireImg>();
var user = await GetCurrentUserAsync();
var userName = user?.Identity?.Name;
var operatorid = await GetOperatorIdAsync();
var exampleData = new List<PremireImg>
{
new PremireImg { PremierImg = "Img_Premier/a7btrrl8_bael-juice_625x300_03_May_23.webp", PremierName = "Card ttl-1", PremierImg_Text = "Dummy text of the printing and typesetting industry." },
new PremireImg { PremierImg = "Img_Premier/cmjn6a3_cheela_625x300_03_May_23.jpg", PremierName = "Card ttl-2", PremierImg_Text = "Text of the printing and typesetting industry." },
new PremireImg { PremierImg = "Img_Premier/slide-1.webp", PremierName = "Card ttl-3", PremierImg_Text = "Lorem Ipsum is simply dummy text of the printing." },
new PremireImg { PremierImg = "Img_Premier/image1.jpg", PremierName = "Card ttl-4", PremierImg_Text = "Marvel is simply dummy text of the printing." },
new PremireImg { PremierImg = "Img_Premier/image2.jpg", PremierName = "Card ttl-5", PremierImg_Text = "Epg is simply dummy text of the printing." },
new PremireImg { PremierImg = "Img_Premier/image3.jpg", PremierName = "Card ttl-6", PremierImg_Text = "Selfcare is simply dummy text of the printing." },
new PremireImg { PremierImg = "Img_Premier/image4.jpg", PremierName = "Card ttl-7", PremierImg_Text = "NDTV is simply dummy text of the printing." },
};
if (premireimgs.Count == 0)
{
premireimgs.AddRange(exampleData);
}
return premireimgs;
}>
Please help resolve the issue where I'm not able to use the indicator, i.e. click on indicator does not the image to that area. The issue is that when I click on the indicator of a particular, then it should display that image.
Index.razor:
@page "/"
@inject ChannelService ChannelService
@using EpgCare.Model
@using Microsoft.AspNetCore.Components.Web
@using System.Timers
@inject NavigationManager NavManager
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject IJSRuntime JSRuntime
<!-- Main Container -->
<div class="main-container">
<!-- Premier Section -->
@if (premireimges == null)
{
<p><em>Loading...</em></p>
}
else
{
<div class="custom-carousel">
<div class="carousel-inner">
@foreach (var x in _distinctPremiereImages)
{
@if (!string.IsNullOrEmpty(x.PremierImg))
{
<div class="carousel-item @(x == _distinctPremiereImages[CurrentIndex] ? "active" : "")">
<img src="@x.PremierImg" alt="Premier Image" @onerror="(e) => RemoveImage(x)" />
<div class="carousel-caption">
<h1>@x.PremierName</h1>
<p style="font-size:x-large">@x.PremierImg_Text</p>
</div>
</div>
}
}
</div>
<div class="carousel-controls">
<button @onclick="PreviousSlide"><strong><</strong></button>
<button @onclick="NextSlide"><strong>></strong></button>
</div>
<div class="carousel-indicators">
@for (int i = 0; i < _distinctPremiereImages.Count; i++)
{
<span class="indicator @(i == CurrentIndex ? "active" : "")" @onclick="() => GoToSlide(i)"></span>
}
</div>
</div>
}
</div>
@code {
private int CurrentIndex = 0;
private List<PremireImg> premireimges;
private List<PremireImg> _distinctPremiereImages = new();
private Timer _timer;
protected override async Task OnInitializedAsync()
{
var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
var user = authState.User;
if (!user.Identity?.IsAuthenticated ?? false)
{
NavManager.NavigateTo("/Identity/Account/Login");
}
try
{
premireimges = await ChannelService.GetPremireAsync();
UpdateDistinctPremiereImages();
if (premireimges != null && premireimges.Count > 0)
{
StartAutoSlide();
}
}
catch (Exception ex)
{
Console.WriteLine($"Error loading slider images: {ex.Message}");
}
}
private void UpdateDistinctPremiereImages()
{
_distinctPremiereImages = premireimges?
.DistinctBy(img => img.PremierImg)
.ToList() ?? new List<PremireImg>();
}
private void NextSlide()
{
if (_distinctPremiereImages.Count == 0) return;
CurrentIndex = (CurrentIndex + 1) % _distinctPremiereImages.Count;
InvokeAsync(StateHasChanged);
}
private void PreviousSlide()
{
if (_distinctPremiereImages.Count == 0) return;
CurrentIndex = (CurrentIndex - 1 + _distinctPremiereImages.Count) % _distinctPremiereImages.Count;
InvokeAsync(StateHasChanged);
}
private void GoToSlide(int index)
{
Console.WriteLine($"Navigating to slide {index}");
if (index >= 0 && index < _distinctPremiereImages.Count)
{
CurrentIndex = index;
InvokeAsync(StateHasChanged);
}
}
private void RemoveImage(PremireImg image)
{
premireimges.Remove(image);
UpdateDistinctPremiereImages();
// Adjust CurrentIndex if out of bounds
if (CurrentIndex >= _distinctPremiereImages.Count)
{
CurrentIndex = _distinctPremiereImages.Count > 0
? _distinctPremiereImages.Count - 1
: 0;
}
InvokeAsync(StateHasChanged);
}
private void StartAutoSlide()
{
_timer?.Dispose();
_timer = new Timer(80000);
_timer.Elapsed += (sender, e) => InvokeAsync(NextSlide);
_timer.Start();
}
public void Dispose()
{
_timer?.Dispose();
GC.SuppressFinalize(this);
}
}
<style>
.custom-carousel {
position: relative;
width: 100%;
max-width: 1500px;
margin: auto;
overflow: hidden;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
min-width: 100%;
transition: opacity 0.5s ease-in-out;
}
.carousel-item img {
width: 100%;
height: 800px;
object-fit: cover;
}
.carousel-item.active {
opacity: 1;
}
.carousel-item:not(.active) {
opacity: 0;
}
.carousel-caption {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
padding: 10px;
padding-right: 400px;
font-size: xx-large;
margin-bottom:50px;
}
.carousel-controls {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
gap: 12px;
margin-bottom:50px;
margin-right:50px;
}
.carousel-controls button {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 30px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-indicators {
position: absolute;
bottom: 10px;
width: 100%;
display: flex;
justify-content: left;
margin-bottom: 50px;
}
.carousel-indicators .indicator {
width: 60px;
height: 4px;
background-color: dimgrey;
margin: 0 5px;
cursor: pointer;
}
.carousel-indicators .indicator.active {
background-color: white;
}
</style>
ChannelService.cs:
public async Task<List<PremireImg>> GetPremireAsync()
{
var premireimgs = new List<PremireImg>();
var user = await GetCurrentUserAsync();
var userName = user?.Identity?.Name;
var operatorid = await GetOperatorIdAsync();
var exampleData = new List<PremireImg>
{
new PremireImg { PremierImg = "Img_Premier/a7btrrl8_bael-juice_625x300_03_May_23.webp", PremierName = "Card ttl-1", PremierImg_Text = "Dummy text of the printing and typesetting industry." },
new PremireImg { PremierImg = "Img_Premier/cmjn6a3_cheela_625x300_03_May_23.jpg", PremierName = "Card ttl-2", PremierImg_Text = "Text of the printing and typesetting industry." },
new PremireImg { PremierImg = "Img_Premier/slide-1.webp", PremierName = "Card ttl-3", PremierImg_Text = "Lorem Ipsum is simply dummy text of the printing." },
new PremireImg { PremierImg = "Img_Premier/image1.jpg", PremierName = "Card ttl-4", PremierImg_Text = "Marvel is simply dummy text of the printing." },
new PremireImg { PremierImg = "Img_Premier/image2.jpg", PremierName = "Card ttl-5", PremierImg_Text = "Epg is simply dummy text of the printing." },
new PremireImg { PremierImg = "Img_Premier/image3.jpg", PremierName = "Card ttl-6", PremierImg_Text = "Selfcare is simply dummy text of the printing." },
new PremireImg { PremierImg = "Img_Premier/image4.jpg", PremierName = "Card ttl-7", PremierImg_Text = "NDTV is simply dummy text of the printing." },
};
if (premireimgs.Count == 0)
{
premireimgs.AddRange(exampleData);
}
return premireimgs;
}>
Please help resolve the issue where I'm not able to use the indicator, i.e. click on indicator does not the image to that area. The issue is that when I click on the indicator of a particular, then it should display that image.
Share Improve this question edited Mar 25 at 9:44 Zhi Lv 22k1 gold badge27 silver badges37 bronze badges asked Mar 25 at 7:08 Himanshu AtwalHimanshu Atwal 1 1 |1 Answer
Reset to default 0Here's a similar issue on github
If you put a breakpoint on GoToSlide method,you'll find index passed into the method is _distinctPremiereImages.Count instead of current index.This happens because the value of i isn't rendered to the page , it's just evaluated when you trigger the event.You have to declear a local variable as below:
<div class="carousel-indicators">
@for (int i = 0; i < _distinctPremiereImages.Count; i++)
{
var index = i;
<span class="indicator @(index == CurrentIndex ? "active" : "")" @onclick="() => GoToSlide(index)"></span>
}
</div
```>
本文标签：
版权声明：本文标题：.net - Why the carousel indicator aren't working ? I.e clicking on indicator doesnot move to that image - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744213354a2595525.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
data-bs-*attributes, which initialize the carousel and allow sliding (that, or via JS), see the docs – traynor Commented Mar 25 at 8:59