Edição das 18h26min de 24 de julho de 2023

CSS-only Carousel

This carousel is created with HTML and CSS only.

       <a href="#carousel__slide4"
          class="carousel__prev">Go to last slide</a>
       <a href="#carousel__slide2"
          class="carousel__next">Go to next slide</a>

     <a href="#carousel__slide1"
        class="carousel__prev">Go to previous slide</a>
     <a href="#carousel__slide3"
        class="carousel__next">Go to next slide</a>

     <a href="#carousel__slide2"
        class="carousel__prev">Go to previous slide</a>
     <a href="#carousel__slide4"
        class="carousel__next">Go to next slide</a>

     <a href="#carousel__slide3"
        class="carousel__prev">Go to previous slide</a>
     <a href="#carousel__slide1"
        class="carousel__next">Go to first slide</a>

 <aside class="carousel__navigation">

 </aside>

</section>

@@ Linha 1: / Linha 1: @@
-<div id="slideshow">
+<h1>CSS-only Carousel</h1>
-   <div class="slide-wrapper">
-     <div class="slide"><h1 class="slide-number">1</h1></div>
+<p>This carousel is created with HTML and CSS only.</p>
-     <div class="slide"><h1 class="slide-number">2</h1></div>
-     <div class="slide"><h1 class="slide-number">3</h1></div>
+<section class="carousel" aria-label="Gallery">
-     <div class="slide"><h1 class="slide-number">4</h1></div>
+   <ol class="carousel__viewport">
-    <div class="slide"><h1 class="slide-number">5</h1></div>
+     <li id="carousel__slide1"
-   </div>
+        tabindex="0"
-</div>
+        class="carousel__slide">
+      <div class="carousel__snapper">
+        <a href="#carousel__slide4"
+           class="carousel__prev">Go to last slide</a>
+        <a href="#carousel__slide2"
+           class="carousel__next">Go to next slide</a>
+      </div>
+     </li>
+    <li id="carousel__slide2"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide1"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide3"
+         class="carousel__next">Go to next slide</a>
+    </li>
+     <li id="carousel__slide3"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide2"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide4"
+         class="carousel__next">Go to next slide</a>
+    </li>
+     <li id="carousel__slide4"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide3"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide1"
+         class="carousel__next">Go to first slide</a>
+    </li>
+  </ol>
+  <aside class="carousel__navigation">
+    <ol class="carousel__navigation-list">
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide1"
+           class="carousel__navigation-button">Go to slide 1</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide2"
+           class="carousel__navigation-button">Go to slide 2</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide3"
+           class="carousel__navigation-button">Go to slide 3</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide4"
+           class="carousel__navigation-button">Go to slide 4</a>
+      </li>
+    </ol>
+   </aside>
+</section>

Ybooh: mudanças entre as edições

Edição das 18h26min de 24 de julho de 2023

CSS-only Carousel

Menu de navegação

Ybooh: mudanças entre as edições

Edição das 18h26min de 24 de julho de 2023

CSS-only Carousel

Menu de navegação

Pesquisa