Skip to content

Commit

Permalink
feat(swiper): limit swiper image height
Browse files Browse the repository at this point in the history
  • Loading branch information
taazust5 committed Sep 18, 2024
1 parent e60c49c commit c237375
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 269 deletions.
6 changes: 0 additions & 6 deletions app/components/ch/demo/CarouselExample.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,6 @@
<Card type="default">
<template v-slot:image>
<picture>
<source
:srcset="slide.source.srcset"
:height="slide.source.height"
:width="slide.source.width"
:media="slide.source.media"
/>
<img
:src="slide.image.src"
:alt="slide.image.alt"
Expand Down
8 changes: 1 addition & 7 deletions app/components/ch/demo/SlideshowExample.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<swiper
:breakpoints="breakpoints"
:speed="500"
:autoHeight="true"
:autoHeight="false"
:loop="loop"
:keyboard="{
enabled: true,
Expand Down Expand Up @@ -33,12 +33,6 @@
>
<figure>
<picture>
<source
:srcset="slide.source.srcset"
:height="slide.source.height"
:width="slide.source.width"
:media="slide.source.media"
/>
<img
:src="slide.image.src"
:alt="slide.image.alt"
Expand Down
120 changes: 0 additions & 120 deletions app/components/stories/components/Carousel.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=29',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -115,12 +109,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -132,12 +120,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=1045',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -149,12 +131,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=29',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -166,12 +142,6 @@ If the number of images is relatively low (below 6), use the `bullets` variant.
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand Down Expand Up @@ -200,12 +170,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=29',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -217,12 +181,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -234,12 +192,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=1045',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -251,12 +203,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=29',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -268,12 +214,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -285,12 +225,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=1045',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -302,12 +236,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=29',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -319,12 +247,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -336,12 +258,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -353,12 +269,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -370,12 +280,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -387,12 +291,6 @@ If the number of cards is larger than 6, the bullet points are hidden through CS
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand Down Expand Up @@ -423,12 +321,6 @@ The recommended background colors for carousels are the following: `bg--default`
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=29',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -440,12 +332,6 @@ The recommended background colors for carousels are the following: `bg--default`
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=28',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand All @@ -457,12 +343,6 @@ The recommended background colors for carousels are the following: `bg--default`
height: '768',
alt: 'image name',
},
source: {
srcset: 'https://picsum.photos/2048/1152/?image=1045',
width: '2048',
height: '1152',
media: '(min-width: 1024px)',
},
title: 'Card title',
description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
footerInfo: 'Dienstleistungen & Produkte',
Expand Down
Loading

0 comments on commit c237375

Please sign in to comment.