<!-- demo shown on https://dev.to/fcalderan/a-css-carousel-with-snapping-points-and-a-scroll-linked-navigation-5h6j -->

<section class="slider">
   <div>
      <ul id="s">
         <li id="s1">
            <img src="//fabrizio.dev/demo/tesseract1.jpg" 
                 alt="Daniel Tompkins (Portals 2020)" />
         </li>
         <li id="s2">
            <img src="//fabrizio.dev/demo/tesseract2.jpg" 
                 alt="TesseracT (Portals 2020)" />
         </li>
         <li id="s3">
            <img src="//fabrizio.dev/demo/tesseract3.jpg" 
                 alt="Amos Prem Williams (Portals 2020)"/>
         </li>
         <li id="s4">
            <img src="//fabrizio.dev/demo/tesseract4.jpg" 
                 alt="TesseracT (Portals 2020)"/>
         </li>
         <li id="s5">
            <img src="//fabrizio.dev/demo/tesseract5.jpg" 
                 alt="TesseracT (Portals 2020)"/>
         </li>
      </ul>
   </div>
</section>
.slider div {
   /* need to hide the horizontal scrollbar of 
    * the inner list
    */
   overflow: hidden;   
   
   /* using logical properties instead of
    * width and/or height
    */
   inline-size: 80%;
   min-inline-size: 300px;
   max-inline-size: 680px;   
   margin: 4rem auto;
   aspect-ratio: 2 / 1;
   border: 1px #e2e2e2 solid;
   box-shadow: 0 0 60px rgba(0, 0, 20, .6);
   border-radius: 1rem;
}


.slider ul {
   display: flex;
   flex-flow: row nowrap;
   overflow-x: scroll;
   cursor: ew-resize;   
   
   /* so as to clip away the scrollbar */
   block-size: calc(100% + 25px);
   
}

.slider li {
   flex: 0 0 100%;
   /* restore the actual height of the slider */
   block-size: calc(100% - 25px);
}

.slider img {
   object-fit: cover;
   max-inline-size: 100%;
   block-size: 100%; 
}


/* no JS */

External CSS

  1. https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.