Joran design system

Slider Js Nav 

<div class="c-slider-js-nav">
    <div class="c-slider-js-nav-container">
        <div class="c-slider-js-nav__container-left">
            <h2 class="c-slider-js-nav__heading">Projets</h2>
            <div class="c-slider-js-nav__sidebar" aria-hidden="true">
                <ul class="c-slider-js-nav__sidebar-list">

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Provident sed qui quaerat vel iste.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Minima voluptate ex enim.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Et odit non est autem nihil itaque sint facere at.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Blanditiis incidunt quas autem sit.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Aut quas ducimus ipsum tempora dolores.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Veritatis rerum enim dicta est dicta assumenda incidunt et.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Vero tempore nihil est qui.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Est est non saepe sed ratione itaque atque recusandae ut.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Temporibus doloremque ut ducimus.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Quam reprehenderit dolorum cum assumenda esse quo sit.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Voluptas adipisci mollitia ipsum et.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Earum facilis facere aut necessitatibus recusandae quam.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Autem atque voluptas sit enim et.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Et enim voluptatem et veritatis dolores dolores.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Consequatur animi est molestias quisquam inventore dolorum.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Maxime et consequatur magnam minima harum eligendi soluta est.</a>
                    </li>

                    <li class="c-slider-js-nav__sidebar-list-item">
                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Sunt fuga quod quis dicta quia atque harum et.</a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="c-slider-js-nav__container-right">
            <div class="c-slider-js-nav-carousel">

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?Mauritania" alt="ipsam modi enim" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>22 avril 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Provident sed qui quaerat vel iste.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Provident sed qui quaerat vel iste.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?frictionless" alt="qui id laudantium" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>21 août 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Minima voluptate ex enim.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Minima voluptate ex enim.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?reboot" alt="architecto ut placeat" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>14 septembre 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Et odit non est autem nihil itaque sint facere at.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Et odit non est autem nihil itaque sint facere at.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Hollow" alt="qui fugiat culpa" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>5 novembre 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Blanditiis incidunt quas autem sit.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Blanditiis incidunt quas autem sit.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?Sleek" alt="hic deleniti aspernatur" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>6 juin 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Fantastic" alt="facilis harum est" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>2 mai 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Aut quas ducimus ipsum tempora dolores.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Aut quas ducimus ipsum tempora dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?auxiliary" alt="non necessitatibus possimus" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>5 août 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Veritatis rerum enim dicta est dicta assumenda incidunt et.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Veritatis rerum enim dicta est dicta assumenda incidunt et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?core" alt="assumenda quae consequatur" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>1 avril 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Vero tempore nihil est qui.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Vero tempore nihil est qui.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?infrastructure" alt="nihil illum dicta" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>7 septembre 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Est est non saepe sed ratione itaque atque recusandae ut.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Est est non saepe sed ratione itaque atque recusandae ut.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?markets" alt="beatae sit quisquam" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>13 février 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Temporibus doloremque ut ducimus.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Temporibus doloremque ut ducimus.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?compressing" alt="voluptatem aut et" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>10 juillet 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Quam reprehenderit dolorum cum assumenda esse quo sit.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Quam reprehenderit dolorum cum assumenda esse quo sit.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?Coordinator" alt="dolor illo officia" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>5 décembre 2022
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?transmitting" alt="rerum numquam cumque" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>28 janvier 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?FTP" alt="vitae voluptatem aut" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>2 novembre 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Voluptas adipisci mollitia ipsum et.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Voluptas adipisci mollitia ipsum et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?Mobility" alt="nostrum ut voluptas" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>4 novembre 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Earum facilis facere aut necessitatibus recusandae quam.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Earum facilis facere aut necessitatibus recusandae quam.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?panel" alt="quisquam aut recusandae" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>24 avril 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Autem atque voluptas sit enim et.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Autem atque voluptas sit enim et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?overriding" alt="ipsa aut incidunt" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>21 mai 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Et enim voluptatem et veritatis dolores dolores.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Et enim voluptatem et veritatis dolores dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Interface" alt="corrupti aut distinctio" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>22 mars 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Consequatur animi est molestias quisquam inventore dolorum.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Consequatur animi est molestias quisquam inventore dolorum.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Baht" alt="sit rerum et" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>17 octobre 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Maxime et consequatur magnam minima harum eligendi soluta est.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Maxime et consequatur magnam minima harum eligendi soluta est.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                    <figure class="c-slider-js-nav__article-figure">
                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Principal" alt="iste distinctio excepturi" />
                    </figure>
                    <div class="c-slider-js-nav__article-text-container">
                        <div class="c-slider-js-nav__article-date">
                            <span class="u-visually-hidden">Date:</span>31 janvier 2023
                        </div>
                        <h3 class="c-slider-js-nav__article-heading">Sunt fuga quod quis dicta quia atque harum et.</h3>
                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Sunt fuga quod quis dicta quia atque harum et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                    </div>
                </article>

            </div>
        </div>
    </div>
</div>
 
<div class="c-slider-js-nav">
  <div class="c-slider-js-nav-container">
    <div class="c-slider-js-nav__container-left">
      <h2 class="c-slider-js-nav__heading">{{ title }}</h2>
      <div class="c-slider-js-nav__sidebar" aria-hidden="true">
        <ul class="c-slider-js-nav__sidebar-list">
          {% for article in articles %}
          <li class="c-slider-js-nav__sidebar-list-item">
            <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">{{ article.title }}</a>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="c-slider-js-nav__container-right">
      <div class="c-slider-js-nav-carousel">
        {% for article in articles %}
        <article class="o-card-link c-slider-js-nav__article carousel-cell">
          <figure class="c-slider-js-nav__article-figure">
            <img class="c-slider-js-nav__article-image" src="{{ article.image.src }}" alt="{{ article.image.alt }}"/>
          </figure>
          <div class="c-slider-js-nav__article-text-container">
            <div class="c-slider-js-nav__article-date">
              <span class="u-visually-hidden">Date:</span>{{ article.date }}
            </div>
            <h3 class="c-slider-js-nav__article-heading">{{ article.title }}</h3>
            {% render '@button--transparent-alternate-arrow-right', article.button, true %}
          </div>
        </article>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
 
{
  "title": "Projets",
  "articles": [
    {
      "title": "Provident sed qui quaerat vel iste.",
      "url": "http://ethan.org",
      "date": "22 avril 2023",
      "image": {
        "src": "https://source.unsplash.com/384x371?Mauritania",
        "alt": "ipsam modi enim"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Provident sed qui quaerat vel iste."
      }
    },
    {
      "title": "Minima voluptate ex enim.",
      "url": "http://sid.com",
      "date": "21 août 2023",
      "image": {
        "src": "https://source.unsplash.com/384x333?frictionless",
        "alt": "qui id laudantium"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Minima voluptate ex enim."
      }
    },
    {
      "title": "Et odit non est autem nihil itaque sint facere at.",
      "url": "http://arjun.biz",
      "date": "14 septembre 2023",
      "image": {
        "src": "https://source.unsplash.com/384x333?reboot",
        "alt": "architecto ut placeat"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Et odit non est autem nihil itaque sint facere at."
      }
    },
    {
      "title": "Blanditiis incidunt quas autem sit.",
      "url": "https://keagan.info",
      "date": "5 novembre 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?Hollow",
        "alt": "qui fugiat culpa"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Blanditiis incidunt quas autem sit."
      }
    },
    {
      "title": "Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.",
      "url": "https://theresia.net",
      "date": "6 juin 2023",
      "image": {
        "src": "https://source.unsplash.com/384x371?Sleek",
        "alt": "hic deleniti aspernatur"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla."
      }
    },
    {
      "title": "Aut quas ducimus ipsum tempora dolores.",
      "url": "https://adela.com",
      "date": "2 mai 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?Fantastic",
        "alt": "facilis harum est"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Aut quas ducimus ipsum tempora dolores."
      }
    },
    {
      "title": "Veritatis rerum enim dicta est dicta assumenda incidunt et.",
      "url": "https://anjali.com",
      "date": "5 août 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?auxiliary",
        "alt": "non necessitatibus possimus"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Veritatis rerum enim dicta est dicta assumenda incidunt et."
      }
    },
    {
      "title": "Vero tempore nihil est qui.",
      "url": "https://susie.name",
      "date": "1 avril 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?core",
        "alt": "assumenda quae consequatur"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Vero tempore nihil est qui."
      }
    },
    {
      "title": "Est est non saepe sed ratione itaque atque recusandae ut.",
      "url": "https://clay.info",
      "date": "7 septembre 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?infrastructure",
        "alt": "nihil illum dicta"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Est est non saepe sed ratione itaque atque recusandae ut."
      }
    },
    {
      "title": "Temporibus doloremque ut ducimus.",
      "url": "https://johnathan.org",
      "date": "13 février 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?markets",
        "alt": "beatae sit quisquam"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Temporibus doloremque ut ducimus."
      }
    },
    {
      "title": "Quam reprehenderit dolorum cum assumenda esse quo sit.",
      "url": "https://efren.biz",
      "date": "10 juillet 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?compressing",
        "alt": "voluptatem aut et"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Quam reprehenderit dolorum cum assumenda esse quo sit."
      }
    },
    {
      "title": "Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.",
      "url": "http://leonie.biz",
      "date": "5 décembre 2022",
      "image": {
        "src": "https://source.unsplash.com/384x333?Coordinator",
        "alt": "dolor illo officia"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores."
      }
    },
    {
      "title": "Amet asperiores eum nihil impedit optio doloremque nemo aut ut.",
      "url": "https://jadon.net",
      "date": "28 janvier 2023",
      "image": {
        "src": "https://source.unsplash.com/384x371?transmitting",
        "alt": "rerum numquam cumque"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Amet asperiores eum nihil impedit optio doloremque nemo aut ut."
      }
    },
    {
      "title": "Voluptas adipisci mollitia ipsum et.",
      "url": "https://rusty.org",
      "date": "2 novembre 2023",
      "image": {
        "src": "https://source.unsplash.com/384x333?FTP",
        "alt": "vitae voluptatem aut"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Voluptas adipisci mollitia ipsum et."
      }
    },
    {
      "title": "Earum facilis facere aut necessitatibus recusandae quam.",
      "url": "https://martin.org",
      "date": "4 novembre 2023",
      "image": {
        "src": "https://source.unsplash.com/384x333?Mobility",
        "alt": "nostrum ut voluptas"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Earum facilis facere aut necessitatibus recusandae quam."
      }
    },
    {
      "title": "Autem atque voluptas sit enim et.",
      "url": "https://otis.com",
      "date": "24 avril 2023",
      "image": {
        "src": "https://source.unsplash.com/384x333?panel",
        "alt": "quisquam aut recusandae"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Autem atque voluptas sit enim et."
      }
    },
    {
      "title": "Et enim voluptatem et veritatis dolores dolores.",
      "url": "https://lauren.name",
      "date": "21 mai 2023",
      "image": {
        "src": "https://source.unsplash.com/384x371?overriding",
        "alt": "ipsa aut incidunt"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Et enim voluptatem et veritatis dolores dolores."
      }
    },
    {
      "title": "Consequatur animi est molestias quisquam inventore dolorum.",
      "url": "https://sterling.name",
      "date": "22 mars 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?Interface",
        "alt": "corrupti aut distinctio"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Consequatur animi est molestias quisquam inventore dolorum."
      }
    },
    {
      "title": "Maxime et consequatur magnam minima harum eligendi soluta est.",
      "url": "http://audra.org",
      "date": "17 octobre 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?Baht",
        "alt": "sit rerum et"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Maxime et consequatur magnam minima harum eligendi soluta est."
      }
    },
    {
      "title": "Sunt fuga quod quis dicta quia atque harum et.",
      "url": "https://taya.name",
      "date": "31 janvier 2023",
      "image": {
        "src": "https://source.unsplash.com/384x295?Principal",
        "alt": "iste distinctio excepturi"
      },
      "button": {
        "styleModifier": "o-card-link__link",
        "text": "Lire la suite",
        "hiddentext": "de Sunt fuga quod quis dicta quia atque harum et."
      }
    }
  ]
}
  • Content: 
    .c-slider-js-nav {
  @apply
    overflow-hidden
    w-full
  ;
}

.c-slider-js-nav-wrap {
  @apply
    py-24
    bg-primary
  ;
}

.c-slider-js-nav-container {
  @apply
    flex
  ;
}

.c-slider-js-nav__container-left {
  @apply
    opacity-100
    hidden
    invisible
    xl:visible
    xl:block
  ;

  transition: opacity 0.35s ease-in-out;
}

.c-slider-js-nav__container-left--hidden {
  @apply
    opacity-0
  ;
}

.c-slider-js-nav__container-right {
  @apply
    flex-grow
    pt-4
    pb-14
  ;
}

.c-slider-js-nav__article {
  @apply
    w-96
    mb-6
  ;
}

.c-slider-js-nav__article:not(:last-child) {
  @apply
    mr-6
  ;
}

.c-slider-js-nav__article h3 {
  @apply
    text-white
    text-2xl
    font-bold
    tracking-tight
  ;

  line-height: 2.375rem;
}

.c-slider-js-nav__article img {
  @apply
    mb-5
    w-full
    h-auto
    rounded
  ;

  background-color: var(--color__primary--600);
  min-height: 200px;
}

.c-slider-js-nav__article-text-container {
  @apply
    pl-2.5
    border-l
    border-white
    border-opacity-70
  ;
}

.c-slider-js-nav__article .c-button {
  @apply
    text-white
    text-opacity-70
  ;

  font-size: 0.95rem;
  transition: color 0.35s ease;
}

.c-slider-js-nav__article .c-button:hover {
  @apply
    text-opacity-100
  ;
}

.c-slider-js-nav__article-date {
  @apply
    text-white
    text-opacity-70
    text-sm
  ;
}

.c-slider-js-nav__heading {
  @apply
    text-white
    text-4xl
    uppercase
    font-bold
    tracking-tight
    mb-5
  ;
}

.c-slider-js-nav__sidebar {
  @apply
    pr-10
    w-96
  ;
}

.c-slider-js-nav__sidebar-list {
  min-height: 450px;
  overflow-y: auto;
  scrollbar-color: #fcfcfc rgba(0, 0, 0, 0.25);
  scrollbar-width: thin;
}

.c-slider-js-nav__sidebar-list::-webkit-scrollbar-thumb {
  @apply
    bg-white
  ;
}

.c-slider-js-nav__sidebar-list::-webkit-scrollbar-track {
  @apply
    bg-black
    bg-opacity-25
  ;
}

.c-slider-js-nav__sidebar-list::-webkit-scrollbar {
  @apply
    w-1
    h-1
  ;
}

.c-slider-js-nav__sidebar-list-link {
  @apply
    text-white
    text-opacity-70
    text-sm
    inline-block
    my-4
    mr-3
  ;

  transition: color 0.35s ease;
}

.c-slider-js-nav__sidebar-list-link:hover {
  @apply
    text-opacity-100
  ;
}

.c-slider-js-nav .flickity-button {
  @apply
    top-full
    bg-white
    bg-opacity-25
  ;

  transition: background-color 0.35s ease-in-out;
}

.c-slider-js-nav .flickity-prev-next-button {
  width: 35px;
  height: 35px;
}

.c-slider-js-nav .flickity-button:hover .flickity-button-icon {
  fill: var(--color__primary--600);
}

.c-slider-js-nav .flickity-button .flickity-button-icon {
  transition: all 0.35s ease;
  fill: rgb(252, 252, 252);
  width: 15px;
  left: 10px;
}

.c-slider-js-nav .flickity-button.previous {
  @apply
    left-auto
    right-20
  ;
}

.c-slider-js-nav .flickity-page-dots {
  @apply
    w-auto
    left-0
  ;

  bottom: -5px;
}

.c-slider-js-nav .flickity-page-dots .dot {
  @apply
    h-1
    w-3.5
    m-0
    bg-black
    rounded-none
  ;
}

@screen sm {
  .c-slider-js-nav .flickity-page-dots .dot {
    @apply
      w-8
    ;
  }

  .c-slider-js-nav .flickity-button .flickity-button-icon {
    left: 15px;
  }

  .c-slider-js-nav .flickity-prev-next-button {
    width: 44px;
    height: 44px;
  }
}

.c-slider-js-nav .flickity-button:focus {
  @apply outline-focus;
}

.c-slider-js-nav .flickity-page-dots .dot.is-selected {
  @apply
    bg-white
  ;
}

.c-slider-js-nav .flickity-viewport {
  @apply
    overflow-visible
  ;
}
  • URL: /components/raw/slider-js-nav/_components.slider-js-nav.css
  • Filesystem Path: src/components/04-Components/slider/slider-js-nav/_components.slider-js-nav.css
  • Size: 3.5 KB
  • Content: 
    const initSlider = () => {
  for (const item of document.querySelectorAll('.c-slider-js-nav-carousel')) {
    const sidebar = item.parentNode.parentNode.querySelector('.c-slider-js-nav__container-left');
    let highest = 0;
    new Flickity(item, {
      contain: true,
      imagesLoaded: true,
      on: {
        ready() {
          for (const card of item.querySelectorAll('.c-slider-js-nav__article')) {
            if (card.offsetHeight > highest) {
              highest = card.offsetHeight;
            }
          }

          sidebar.querySelector('.c-slider-js-nav__sidebar-list').style.height = (highest + 50) + 'px';
        },
        change(index) {
          if (index > 0) {
            sidebar.classList.add('c-slider-js-nav__container-left--hidden');
          } else {
            sidebar.classList.remove('c-slider-js-nav__container-left--hidden');
          }
        },
      },
    });
  }
};

document.addEventListener('DOMContentLoaded', initSlider);
  • URL: /components/raw/slider-js-nav/slider-js-nav.js
  • Filesystem Path: src/components/04-Components/slider/slider-js-nav/slider-js-nav.js
  • Size: 978 Bytes

No notes defined.