<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider avec c-scrollspy</title>
<style>
body {
padding: 2em;
color: #333;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
line-height: 1.5em;
background-color: ghostwhite;
padding-bottom: 150vh;
}
nav {
width: 100%;
text-align: center;
}
ul {
width: 100%;
list-style: none;
padding: 1em;
margin: 0 auto;
display: flex;
gap: 1em;
overflow: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
box-sizing: border-box;
border: 2px solid dodgerblue;
background-color: ghostwhite;
}
li {
min-width: 100%;
max-width: 100%;
padding: 5em 2em;
box-sizing: border-box;
scroll-snap-align: start;
scroll-margin-top: 100vh;
scroll-margin-left: 1em;
display: flex;
align-items: center;
justify-content: center;
background-color: dodgerblue;
color: white;
}
a {
color: dodgerblue;
font-weight: 700;
text-decoration: none;
}
a.active {
opacity: 0.3;
}
</style>
</head>
<body>
<ul>
<li id="foo1" c-scrollspy="anchor">1</li>
<li id="foo2" c-scrollspy="anchor">2</li>
<li id="foo3" c-scrollspy="anchor">3</li>
<li id="foo4" c-scrollspy="anchor">4</li>
<li id="foo5" c-scrollspy="anchor">5</li>
<li id="foo6" c-scrollspy="anchor">6</li>
</ul>
<nav>
<a href="#foo1">1</a>
<a href="#foo2">2</a>
<a href="#foo3">3</a>
<a href="#foo4">4</a>
<a href="#foo5">5</a>
<a href="#foo6">6</a>
</nav>
<script src="/assets/c-scrollspy.js"></script>
</body>
</html>