Skip to content

Slider Component Fixes #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 18, 2024
Merged

Slider Component Fixes #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
693a795
fix resize problem
junaid-travelopia Feb 18, 2024
677d7d6
fix slider with non-flexible height and fade
junaid-travelopia Feb 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion src/slider/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

<br>

<!--Slider with 'fade in' effect-->
<!--Slider with 'fade in' effect and flexible height-->
<tp-slider flexible-height="yes" infinite="yes" swipe="yes" behaviour="fade">
<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
Expand Down Expand Up @@ -90,6 +90,35 @@

<br>

<!--Slider with 'fade in' effect and not flexible height-->
<tp-slider behaviour="fade" infinite="yes" swipe="yes">
<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
<tp-slider-track>
<tp-slider-slides>
<tp-slider-slide><img src="https://picsum.photos/600/300" width="600" height="300" alt=""></tp-slider-slide>
<tp-slider-slide><img src="https://picsum.photos/600/300" width="600" height="300" alt=""></tp-slider-slide>
<tp-slider-slide><img src="https://picsum.photos/600/300" width="600" height="300" alt=""></tp-slider-slide>
<tp-slider-slide>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</tp-slider-slide>
</tp-slider-slides>
</tp-slider-track>
<tp-slider-nav>
<tp-slider-nav-item><button>1</button></tp-slider-nav-item>
<tp-slider-nav-item><button>2</button></tp-slider-nav-item>
<tp-slider-nav-item><button>3</button></tp-slider-nav-item>
<tp-slider-nav-item><button>4</button></tp-slider-nav-item>
</tp-slider-nav>
<tp-slider-count current="1" total="4" format="$current / $total">1 / 4</tp-slider-count>
</tp-slider>

<br>

<!--Sliders with multiple visible slides-->
<tp-slider>
<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
Expand Down
29 changes: 19 additions & 10 deletions src/slider/tp-slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,8 +321,8 @@ export class TPSliderElement extends HTMLElement {
return;
}

// Bail early if we don't want it to be flexible height.
if ( 'yes' !== this.getAttribute( 'flexible-height' ) ) {
// Bail early if we don't want it to be flexible height - as long as it doesn't fade.
if ( 'yes' !== this.getAttribute( 'flexible-height' ) && 'fade' !== this.getAttribute( 'behaviour' ) ) {
// Remove height property for good measure!
slidesContainer.style.removeProperty( 'height' );
return;
Expand All @@ -334,9 +334,22 @@ export class TPSliderElement extends HTMLElement {
return;
}

// Set the height of the container to be the height of the current slide.
const height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;
slidesContainer.style.height = `${ height }px`;
// Check if we have a flexible height.
if ( 'yes' === this.getAttribute( 'flexible-height' ) ) {
// Set the height of the container to be the height of the current slide.
const height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;
slidesContainer.style.height = `${ height }px`;
} else {
// Set the height of the container to be the height of the tallest slide.
let height: number = 0;
slides.forEach( ( slide: TPSliderSlideElement ): void => {
if ( slide.scrollHeight > height ) {
height = slide.scrollHeight;
}
} );

slidesContainer.style.height = `${ height }px`;
}
}

/**
Expand All @@ -357,11 +370,7 @@ export class TPSliderElement extends HTMLElement {
this.slide();

// Done, let's remove the flag.
// We need to do this on a timeout to avoid a race condition with transitions.
const _this = this;
setTimeout( function() {
_this.removeAttribute( 'resizing' );
}, 20 );
this.removeAttribute( 'resizing' );
}

/**
Expand Down