Skip to content

Commit 5b61450

Browse files
github-actions[bot]xristianstefanovDimo Dimovdimodi
authored
Merge kb-carousel-thumbnail-navigation-743 into production (#750)
* kb(carousel):thumbnail scrollable navigation * code improvements * Update knowledge-base/carousel-thumbnail-scrollable-navigation.md * Update knowledge-base/carousel-thumbnail-scrollable-navigation.md * Update knowledge-base/carousel-thumbnail-scrollable-navigation.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/carousel-thumbnail-scrollable-navigation.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/carousel-thumbnail-scrollable-navigation.md Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Hristian Stefanov <[email protected]> Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Hristian Stefanov <[email protected]>
1 parent 220e8c3 commit 5b61450

File tree

2 files changed

+150
-0
lines changed

2 files changed

+150
-0
lines changed

‎knowledge-base/carousel-thumbnail-scrollable-navigation.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
title: Carousel Thumbnail Scrollable Navigation
3+
description: How to use thumbnails in scrollable navigation for the Carousel?
4+
type: how-to
5+
page_title: Carousel Thumbnail Scrollable Navigation
6+
slug: carousel-kb-thumbnail-scrollable-navigation
7+
position:
8+
tags: telerik,blazor,carousel,thumbnail,navigation,images
9+
ticketid: 1550292
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Carousel for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
How to add a thumbnail scrollable navigation below the page/image in Carousel? This would be a nice addition, which would allow independent scrolling from that of the current page. It will also be clickable in the same way that the dots are to jump to the selected page.
26+
27+
## Solution
28+
To add a thumbnail scrollable navigation:
29+
30+
1. Add HTML `<div>` container under the `Carousel` markup.
31+
2. Apply custom CSS with the needed styles to the container.
32+
3. Inside the `<div>`, loop through all the images in `Carousel` and define them in a smaller size.
33+
4. Optionally, use a javascript function that keeps the synchronization of the `AutomaticPageChange` and the thumbnail.
34+
35+
![](images/carousel-thumbnail-navigation.png)
36+
37+
>caption Component
38+
39+
````CSHTML
40+
@inject IJSRuntime JSRuntime;
41+
42+
<TelerikCarousel Data="@CarouselData"
43+
Width="600px" Height="384px"
44+
PageChanged="PageChangedHandler" Page="PageIndex">
45+
<Template>
46+
<div class="image-with-text">
47+
<p>Showing image @(context.ImageID) of @CarouselData.Count.ToString().</p>
48+
<img src="@context.ImageUrl" alt="Photograph" width="612" height="384" />
49+
</div>
50+
</Template>
51+
</TelerikCarousel>
52+
53+
<div class="container-nav">
54+
<div class="images-nav">
55+
@foreach (var img in CarouselData)
56+
{
57+
<img @onclick="@(() => PageChangedHandler(img.ImageID))" id="@img.ImageID"
58+
class="image-thumbnail"
59+
src="@img.ImageUrl" alt="Photograph" />
60+
}
61+
</div>
62+
</div>
63+
64+
<!-- Move the JavaScript code to a separate .js file in the actual app -->
65+
<script suppress-error="BL9992">
66+
function ScrollToCurrentPage(imgId) {
67+
var elem = document.getElementById(imgId);
68+
if (elem) {
69+
elem.scrollIntoView();
70+
}
71+
}
72+
</script>
73+
74+
@code {
75+
public List<CarouselModel> CarouselData { get; set; }
76+
public int PageIndex = 1;
77+
78+
public async Task PageChangedHandler(int newPage)
79+
{
80+
PageIndex = newPage;
81+
await JSRuntime.InvokeVoidAsync("ScrollToCurrentPage", newPage);
82+
}
83+
84+
protected override Task OnInitializedAsync()
85+
{
86+
CarouselData = Enumerable.Range(0, 13).Select(x => new CarouselModel
87+
{
88+
ImageID = x + 1,
89+
ImageUrl = $"https://demos.telerik.com/blazor-ui/images/photos/{x % 7 + 1}.jpg"
90+
}).ToList();
91+
92+
return base.OnInitializedAsync();
93+
}
94+
95+
public class CarouselModel
96+
{
97+
public int ImageID { get; set; }
98+
public string ImageUrl { get; set; }
99+
}
100+
}
101+
102+
<style>
103+
html, body {
104+
max-width: 100%;
105+
overflow-x: hidden;
106+
}
107+
108+
/* center the Carousel horizontally */
109+
/* k-scrollview is the default component class */
110+
.k-scrollview {
111+
margin: 0 auto;
112+
}
113+
114+
/* enable absolute positioning inside the Carousel template */
115+
.image-with-text {
116+
position: relative;
117+
}
118+
119+
/* style the overlay text inside the Carousel */
120+
.image-with-text > p {
121+
position: absolute;
122+
top: 1rem;
123+
left: 1.6rem;
124+
color: rgba(255, 255, 255, .8);
125+
margin: 0;
126+
font-style: italic;
127+
text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
128+
}
129+
130+
.images-nav {
131+
text-align: center;
132+
margin-top: 7px;
133+
display: flex;
134+
width: 550px;
135+
overflow-x: auto;
136+
}
137+
138+
.image-thumbnail {
139+
width: 80px;
140+
height: 50px;
141+
border: outset;
142+
margin: 1px 1px 1px 1px
143+
}
144+
145+
.container-nav {
146+
display: flex;
147+
justify-content: center;
148+
}
149+
</style>
150+
````

‎knowledge-base/images/carousel-thumbnail-navigation.png‎

379 KB
Loading

0 commit comments

Comments
 (0)