Skip to content

WP-144 tp-carousel component #115

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

Draft
harshdeep-gill wants to merge 31 commits into
base: master
Choose a base branch
from
Draft

WP-144 tp-carousel component #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
a64fa71
WP-144: TP Slider Component
benerd Mar 16, 2025
60440f2
tp-new-slider update
benerd Mar 18, 2025
5720769
WP-96 tooltip first commit
junaid-travelopia Mar 5, 2025
436985e
WP-96 add tooltip trigger
junaid-travelopia Mar 5, 2025
6f19220
WP-96 set the position of the tooltip
junaid-travelopia Mar 5, 2025
55a3693
Add styling needed for arrow and minor changes
harshdeep-gill Mar 11, 2025
608e073
Add more content to html for debugging edge cases
harshdeep-gill Mar 12, 2025
098dddc
WP-96 Add arrow styles and position code
harshdeep-gill Mar 19, 2025
a3143f0
WP-96 Add window scroll listener and touch devices support
harshdeep-gill Mar 19, 2025
d39b21a
WP-96 Remove redundant code
harshdeep-gill Mar 19, 2025
c7f0137
WP-96 move styles
junaid-travelopia Mar 27, 2025
0bb75e5
WP-96 add events and readme
junaid-travelopia Mar 27, 2025
dd9e8f1
bump version
junaid-travelopia Mar 27, 2025
347cc2e
Fix navigation issue
monikatravelopia Mar 21, 2025
7e88fed
WP-183 Dynamic navigation for TP slider using template
monikatravelopia Mar 28, 2025
7723e46
Revert navigation fix
monikatravelopia Mar 28, 2025
e09ff15
WP-183 Add nav based on step
monikatravelopia Apr 1, 2025
30e10b4
WP-183 Remove multiple spaces
monikatravelopia Apr 1, 2025
372e120
WP-183 update dynamic nav items
junaid-travelopia Apr 2, 2025
8ae859f
WP-183 update index file
junaid-travelopia Apr 2, 2025
6bac969
WP-183 update index file
junaid-travelopia Apr 2, 2025
f080522
Added Set time out for update height function.
roshniahuja Apr 2, 2025
b81bf1c
Changed set timeout structure.
roshniahuja Apr 3, 2025
5cc3fa3
Changed structure of set timeout.
roshniahuja Apr 4, 2025
0ced494
bump version
junaid-travelopia Apr 6, 2025
2581e1e
Add first version of working slider with snap
harshdeep-gill Apr 26, 2025
76d59ed
WP-144 Handle infinite attribute
harshdeep-gill May 2, 2025
f0b6b9e
WP-144 Add per-view and step support
harshdeep-gill May 2, 2025
83d6e58
WP-144 Add logic for manual scroll
harshdeep-gill May 22, 2025
7f61859
WP-205 Add scroll snap to tp-slider with intersection observer
harshdeep-gill Jun 23, 2025
6a75ced
WP-205 Revamped the logic without using intersection observer
harshdeep-gill Jun 24, 2025
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
183 changes: 39 additions & 144 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
{
"name": "@travelopia/web-components",
"version": "0.8.0",
"version": "0.9.1",
"description": "Accessible web components for the modern web",
"files": [
"dist"
],
"scripts": {
"build": "webpack --config ./webpack.config.js --mode production --env=production",
"dev": "webpack --config ./webpack.config.js --mode production --env=development --watch",
"lint": "eslint src"
"lint": "eslint src",
"lint:fix": "eslint src --fix"
},
"repository": {
"type": "git",
Expand Down
17 changes: 7 additions & 10 deletions src/slider/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,28 +33,25 @@
<body>
<main>
<!--Slider that slides horizontally with responsive settings.-->
<tp-slider swipe-threshold="210" flexible-height="yes" infinite="yes" swipe="yes" responsive='[{"media":"(min-width: 600px)","flexible-height":"yes","infinite":"no","swipe":"yes","auto-slide-interval":2000,"per-view":1,"step":2},{"media":"(min-width: 300px)","flexible-height":"yes","infinite":"no","swipe":"yes","behaviour":"fade","auto-slide-interval":2000,"per-view":1,"step":1}]'>
<tp-slider flexible-height="yes" 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-slide><img src="https://picsum.photos/600/300" width="600" height="300" alt=""></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>
<template>
<tp-slider-nav-item>
<button>$index</button>
</tp-slider-nav-item>
</template>
</tp-slider-nav>
<tp-slider-count current="1" total="4" format="$current / $total">1 / 4</tp-slider-count>
</tp-slider>
Expand Down
2 changes: 1 addition & 1 deletion src/slider/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ import { TPSliderCountElement } from './tp-slider-count';
/**
* Register Components.
*/
customElements.define( 'tp-slider-nav', TPSliderNavElement );
customElements.define( 'tp-slider', TPSliderElement );
customElements.define( 'tp-slider-count', TPSliderCountElement );
customElements.define( 'tp-slider-track', TPSliderTrackElement );
customElements.define( 'tp-slider-slides', TPSliderSlidesElement );
customElements.define( 'tp-slider-slide', TPSliderSlideElement );
customElements.define( 'tp-slider-arrow', TPSliderArrowElement );
customElements.define( 'tp-slider-nav', TPSliderNavElement );
customElements.define( 'tp-slider-nav-item', TPSliderNavItemElement );
Loading