YAY SLIDER FINALLY DONE HOLY SHIT
This commit is contained in:
parent
17df5367f9
commit
b74211c4e9
65
package-lock.json
generated
65
package-lock.json
generated
@ -28,6 +28,7 @@
|
|||||||
"svelte-check": "^2.2.6",
|
"svelte-check": "^2.2.6",
|
||||||
"svelte-hcaptcha": "^0.1.1",
|
"svelte-hcaptcha": "^0.1.1",
|
||||||
"svelte-preprocess": "^4.10.1",
|
"svelte-preprocess": "^4.10.1",
|
||||||
|
"swiper": "^8.2.4",
|
||||||
"tslib": "^2.3.1",
|
"tslib": "^2.3.1",
|
||||||
"typescript": "~4.6.2"
|
"typescript": "~4.6.2"
|
||||||
}
|
}
|
||||||
@ -991,6 +992,15 @@
|
|||||||
"node": ">=6.0.0"
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dom7": {
|
||||||
|
"version": "4.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
|
||||||
|
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"ssr-window": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dotenv": {
|
"node_modules/dotenv": {
|
||||||
"version": "16.0.0",
|
"version": "16.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
|
||||||
@ -2769,6 +2779,12 @@
|
|||||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
|
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/ssr-window": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/string-width": {
|
"node_modules/string-width": {
|
||||||
"version": "4.2.3",
|
"version": "4.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||||
@ -2967,6 +2983,30 @@
|
|||||||
"sourcemap-codec": "^1.4.8"
|
"sourcemap-codec": "^1.4.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/swiper": {
|
||||||
|
"version": "8.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.2.4.tgz",
|
||||||
|
"integrity": "sha512-TPq64KiZUt8lZY5ZEg75RjToT+RwfLomfKIpcFLy6+UCUp2kL7hHWslLxjFtcFeiwfG67RHFYbJnq6tsothcJQ==",
|
||||||
|
"dev": true,
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "patreon",
|
||||||
|
"url": "https://www.patreon.com/swiperjs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "open_collective",
|
||||||
|
"url": "http://opencollective.com/swiper"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"dependencies": {
|
||||||
|
"dom7": "^4.0.4",
|
||||||
|
"ssr-window": "^4.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 4.7.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/table": {
|
"node_modules/table": {
|
||||||
"version": "6.8.0",
|
"version": "6.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
|
||||||
@ -3984,6 +4024,15 @@
|
|||||||
"esutils": "^2.0.2"
|
"esutils": "^2.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"dom7": {
|
||||||
|
"version": "4.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
|
||||||
|
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"ssr-window": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"dotenv": {
|
"dotenv": {
|
||||||
"version": "16.0.0",
|
"version": "16.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
|
||||||
@ -5181,6 +5230,12 @@
|
|||||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
|
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"ssr-window": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"string-width": {
|
"string-width": {
|
||||||
"version": "4.2.3",
|
"version": "4.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||||
@ -5291,6 +5346,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"swiper": {
|
||||||
|
"version": "8.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.2.4.tgz",
|
||||||
|
"integrity": "sha512-TPq64KiZUt8lZY5ZEg75RjToT+RwfLomfKIpcFLy6+UCUp2kL7hHWslLxjFtcFeiwfG67RHFYbJnq6tsothcJQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"dom7": "^4.0.4",
|
||||||
|
"ssr-window": "^4.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"table": {
|
"table": {
|
||||||
"version": "6.8.0",
|
"version": "6.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
|
||||||
|
@ -28,6 +28,7 @@
|
|||||||
"svelte-check": "^2.2.6",
|
"svelte-check": "^2.2.6",
|
||||||
"svelte-hcaptcha": "^0.1.1",
|
"svelte-hcaptcha": "^0.1.1",
|
||||||
"svelte-preprocess": "^4.10.1",
|
"svelte-preprocess": "^4.10.1",
|
||||||
|
"swiper": "^8.2.4",
|
||||||
"tslib": "^2.3.1",
|
"tslib": "^2.3.1",
|
||||||
"typescript": "~4.6.2"
|
"typescript": "~4.6.2"
|
||||||
},
|
},
|
||||||
|
14
src/lib/utils.ts
Normal file
14
src/lib/utils.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { supabase } from './supabase';
|
||||||
|
|
||||||
|
const setImageUrl = (imageSpec) => {
|
||||||
|
const { publicURL, error } = supabase
|
||||||
|
.storage
|
||||||
|
.from('mistymountains')
|
||||||
|
.getPublicUrl(imageSpec.image);
|
||||||
|
if (!error) {
|
||||||
|
return { ...imageSpec, image: publicURL };
|
||||||
|
}
|
||||||
|
return imageSpec;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default setImageUrl;
|
@ -1,6 +1,25 @@
|
|||||||
<div class="row align-items-center py-2">
|
<div class="row align-items-center py-2">
|
||||||
<div class="col-md-7">
|
<div class="col-md-7">
|
||||||
<img src="https://ztxoywaazhxdeiftmsiy.supabase.co/storage/v1/object/public/mistymountains/mountains.png" alt="mountains" class="img-fluid rounded shadow">
|
<Swiper
|
||||||
|
modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
|
||||||
|
class="rounded shadow"
|
||||||
|
spaceBetween={50}
|
||||||
|
slidesPerView={1}
|
||||||
|
autoHeight={true}
|
||||||
|
loop={true}
|
||||||
|
navigation
|
||||||
|
pagination={{ clickable: true }}
|
||||||
|
autoplay={true}
|
||||||
|
speed={1000}
|
||||||
|
on:slideChange={() => console.log('slide change')}
|
||||||
|
on:swiper={(e) => console.log(e.detail[0])}
|
||||||
|
>
|
||||||
|
{#each images as { image, alt } (image)}
|
||||||
|
<SwiperSlide>
|
||||||
|
<img class="image-fluid" style="width:100%" src={image} alt={alt} />
|
||||||
|
</SwiperSlide>
|
||||||
|
{/each}
|
||||||
|
</Swiper>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5 my-2">
|
<div class="col-md-5 my-2">
|
||||||
<h2>Helping you conquer Mount Doom</h2>
|
<h2>Helping you conquer Mount Doom</h2>
|
||||||
@ -8,7 +27,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-light rounded py-3 shadow">
|
<div class="bg-light rounded p-3 shadow">
|
||||||
<div class="d-flex justify-content-center">
|
<div class="d-flex justify-content-center">
|
||||||
<div class="col-md-8 mt-2 border-bottom">
|
<div class="col-md-8 mt-2 border-bottom">
|
||||||
<h3>"Darkness must pass, a new day will come, and when the sun shines, it will shine out the clearer."</h3>
|
<h3>"Darkness must pass, a new day will come, and when the sun shines, it will shine out the clearer."</h3>
|
||||||
@ -32,4 +51,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { supabase } from '$lib/supabase';
|
||||||
|
import setImageUrl from '$lib/utils';
|
||||||
|
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/svelte';
|
||||||
|
import 'swiper/css';
|
||||||
|
import 'swiper/css/navigation';
|
||||||
|
import 'swiper/css/pagination';
|
||||||
|
import 'swiper/css/scrollbar';
|
||||||
|
import 'swiper/css/autoplay';
|
||||||
|
|
||||||
|
const images = [
|
||||||
|
{ image: 'mountains.png', alt: 'Cloudy mountains in a light sky' },
|
||||||
|
{ image: 'office-1-1.jpeg', alt: 'Office room one' },
|
||||||
|
{ image: 'office-1-2.jpeg', alt: 'Office room one angle two' },
|
||||||
|
{ image: 'office-2-1.jpeg', alt: 'Office room two' },
|
||||||
|
{ image: 'office-2-2.jpeg', alt: 'Office room two angle two' },
|
||||||
|
].map(setImageUrl);
|
||||||
|
</script>
|
@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { supabase } from '$lib/supabase';
|
import { supabase } from '$lib/supabase';
|
||||||
|
import setImageUrl from '$lib/utils';
|
||||||
|
|
||||||
const getPeople = async () => {
|
const getPeople = async () => {
|
||||||
const { data, error } = await supabase.from('people').select().order('id');
|
const { data, error } = await supabase.from('people').select().order('id');
|
||||||
@ -12,22 +13,9 @@
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapImages = (people) => {
|
|
||||||
return people.map((x) => {
|
|
||||||
const { publicURL, error } = supabase
|
|
||||||
.storage
|
|
||||||
.from('mistymountains')
|
|
||||||
.getPublicUrl(x.image);
|
|
||||||
if (!error) {
|
|
||||||
return { ...x, image: publicURL };
|
|
||||||
}
|
|
||||||
return x;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let people = [];
|
let people = [];
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
people = await getPeople().then(mapImages);
|
people = await getPeople().then((people) => people.map(setImageUrl));
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user