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.