Skip to content

Commit b9d57dd

Browse files
authored
feat: add sources to improve LCP + add loading and fetchpriority attributes (#260)
1 parent d8a95a2 commit b9d57dd

File tree

162 files changed

+625
-54
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

162 files changed

+625
-54
lines changed

examples/angular-cli-16/src/app/carousel/carousel.component.ts

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,31 @@ export class CarouselExampleComponent {
202202
modalGalleryEnable: false
203203
}
204204
};
205+
LIBCONFIG124: CarouselLibConfig = {
206+
carouselPreviewsConfig: {
207+
visible: true,
208+
breakpoints: {
209+
xSmall: 50,
210+
small: 60,
211+
medium: 70,
212+
large: 80,
213+
xLarge: 100
214+
}
215+
},
216+
carouselConfig: {
217+
maxWidth: '500px',
218+
maxHeight: '400px',
219+
showArrows: true,
220+
objectFit: 'cover',
221+
keyboardEnable: true,
222+
modalGalleryEnable: false
223+
},
224+
carouselPlayConfig: {
225+
autoPlay: false,
226+
interval: 1,
227+
pauseOnHover: true
228+
}
229+
};
205230

206231
imagesRect: Image[] = [
207232
new Image(
@@ -260,6 +285,98 @@ export class CarouselExampleComponent {
260285
new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' })
261286
];
262287

288+
imagesRectWithSources: Image[] = [
289+
new Image(
290+
0,
291+
{
292+
img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg',
293+
description: 'Description 1',
294+
sources: [
295+
{ media: '(max-width: 480px)', srcset: '/assets/images/gallery/milan-pegasus-gallery-statue-480w.jpg' },
296+
{ media: '(max-width: 768px)', srcset: '/assets/images/gallery/milan-pegasus-gallery-statue-768w.jpg' },
297+
{ media: '(max-width: 1024px)', srcset: '/assets/images/gallery/milan-pegasus-gallery-statue-1024w.jpg' }
298+
]
299+
},
300+
{
301+
img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg',
302+
title: 'First image title',
303+
alt: 'First image alt',
304+
ariaLabel: 'First image aria-label'
305+
}
306+
),
307+
new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg',
308+
sources: [
309+
{ media: '(max-width: 480px)', srcset: '/assets/images/gallery/pexels-photo-47223-480w.jpeg' },
310+
{ media: '(max-width: 768px)', srcset: '/assets/images/gallery/pexels-photo-47223-768w.jpeg' },
311+
{ media: '(max-width: 1024px)', srcset: '/assets/images/gallery/pexels-photo-47223-1024w.jpeg' }
312+
] }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }),
313+
new Image(
314+
2,
315+
{
316+
img: '/assets/images/gallery/pexels-photo-52062.jpeg',
317+
description: 'Description 3',
318+
title: 'Third image title',
319+
alt: 'Third image alt',
320+
ariaLabel: 'Third image aria-label',
321+
sources: [
322+
{ media: '(max-width: 480px)', srcset: '/assets/images/gallery/pexels-photo-52062-480w.jpeg' },
323+
{ media: '(max-width: 768px)', srcset: '/assets/images/gallery/pexels-photo-52062-768w.jpeg' },
324+
{ media: '(max-width: 1024px)', srcset: '/assets/images/gallery/pexels-photo-52062-1024w.jpeg' }
325+
]
326+
},
327+
{
328+
img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg',
329+
description: 'Description 3'
330+
}
331+
),
332+
new Image(
333+
3,
334+
{
335+
img: '/assets/images/gallery/pexels-photo-66943.jpeg',
336+
description: 'Description 4',
337+
title: 'Fourth image title (modal obj)',
338+
alt: 'Fourth image alt (modal obj)',
339+
ariaLabel: 'Fourth image aria-label (modal obj)',
340+
sources: [
341+
{ media: '(max-width: 480px)', srcset: '/assets/images/gallery/pexels-photo-66943-480w.jpeg' },
342+
{ media: '(max-width: 768px)', srcset: '/assets/images/gallery/pexels-photo-66943-768w.jpeg' },
343+
{ media: '(max-width: 1024px)', srcset: '/assets/images/gallery/pexels-photo-66943-1024w.jpeg' }
344+
]
345+
},
346+
{
347+
img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg',
348+
title: 'Fourth image title (plain obj)',
349+
alt: 'Fourth image alt (plain obj)',
350+
ariaLabel: 'Fourth image aria-label (plain obj)'
351+
}
352+
),
353+
new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg',
354+
sources: [
355+
{ media: '(max-width: 480px)', srcset: '/assets/images/gallery/pexels-photo-93750-480w.jpeg' },
356+
{ media: '(max-width: 768px)', srcset: '/assets/images/gallery/pexels-photo-93750-768w.jpeg' },
357+
{ media: '(max-width: 1024px)', srcset: '/assets/images/gallery/pexels-photo-93750-1024w.jpeg' }
358+
] }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }),
359+
new Image(
360+
5,
361+
{
362+
img: '/assets/images/gallery/pexels-photo-94420.jpeg',
363+
description: 'Description 6',
364+
sources: [
365+
{ media: '(max-width: 480px)', srcset: '/assets/images/gallery/pexels-photo-94420-480w.jpeg' },
366+
{ media: '(max-width: 768px)', srcset: '/assets/images/gallery/pexels-photo-94420-768w.jpeg' },
367+
{ media: '(max-width: 1024px)', srcset: '/assets/images/gallery/pexels-photo-94420-1024w.jpeg' }
368+
]
369+
},
370+
{ img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' }
371+
),
372+
new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg',
373+
sources: [
374+
{ media: '(max-width: 480px)', srcset: '/assets/images/gallery/pexels-photo-96947-480w.jpeg' },
375+
{ media: '(max-width: 768px)', srcset: '/assets/images/gallery/pexels-photo-96947-768w.jpeg' },
376+
{ media: '(max-width: 1024px)', srcset: '/assets/images/gallery/pexels-photo-96947-1024w.jpeg' }
377+
] }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' })
378+
];
379+
263380
emptyImagesArray: Image[] = [];
264381

265382
imagesRectNoTitles: Image[] = [

examples/angular-cli-16/src/app/carousel/carousel.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,4 +199,17 @@ <h3>G2 - (id=122) - carousel example with fixed maxWidth (500px) (previews with
199199
<ks-carousel [id]="122" [images]="imagesRect" [config]="LIBCONFIG122"></ks-carousel>
200200
</section>
201201
<br>
202+
<h3>Examples using sources (to improve LCP)</h3>
203+
<br>
204+
<section>
205+
<h3>H1 - (id=123) - carousel example (minimal with all defaults) without content projection - using sources</h3>
206+
<br>
207+
<ks-carousel [id]="123" [images]="imagesRectWithSources"></ks-carousel>
208+
</section>
209+
<section>
210+
<h3>H2 - (id=124) - carousel example with fixed maxWidth (500px) (previews with different heights based on the window's width: xSmall: 50, small: 60, medium: 70, large: 80, xLarge: 100) - using sources</h3>
211+
<br>
212+
<ks-carousel [id]="124" [images]="imagesRectWithSources" [config]="LIBCONFIG124"></ks-carousel>
213+
</section>
214+
<br>
202215
<br>
916 KB
248 KB
565 KB
585 KB
134 KB
332 KB
574 KB
163 KB

0 commit comments

Comments
 (0)