Ybooh: mudanças entre as edições

1 825 bytes adicionados ,  24 de julho de 2023
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
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>