<!-- svelted version of https://codepen.io/chriscoyier/pen/pMRgwW
TODO: experiment using svelte transitions instead of the CSS
-->
<script>
let sections = [
'Section 1',
'Section 2',
'Section 3',
'Section 4',
'Section 5',
]
</script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slider {
font-family: sans-serif;
scroll-snap-type: x mandatory;
display: flex;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
}
section {
border-right: 1px solid white;
padding: 1rem;
min-width: 100vw;
height: 100vh;
scroll-snap-align: start;
text-align: center;
position: relative;
}
h1 {