Ybooh: mudanças entre as edições

Ir para navegação Ir para pesquisar
706 bytes removidos ,  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:
<h1>CSS-only Carousel</h1>
<div class="carousel">
<div class="carousel">
  <ol class="carousel__viewport">
<ol class="carousel__viewport">
    <li id="carousel__slide1"
<li id="carousel__slide1"
        tabindex="0"
tabindex="0"
        class="carousel__slide">
class="carousel__slide">
      <div class="carousel__snapper">
<div class="carousel__snapper">
        <a href="#carousel__slide4"
<span class="carousel__prev">Go to last slide</span>
          class="carousel__prev">Go to last slide</a>
<span class="carousel__next">Go to next slide</span>
        <a href="#carousel__slide2"
</div>
          class="carousel__next">Go to next slide</a>
</li>
      </div>
<li id="carousel__slide2"
    </li>
tabindex="0"
    <li id="carousel__slide2"
class="carousel__slide">
        tabindex="0"
<div class="carousel__snapper"></div>
        class="carousel__slide">
<span class="carousel__prev">Go to previous slide</span>
      <div class="carousel__snapper"></div>
<span class="carousel__next">Go to next slide</span>
      <a href="#carousel__slide1"
</li>
        class="carousel__prev">Go to previous slide</a>
<li id="carousel__slide3"
      <a href="#carousel__slide3"
tabindex="0"
        class="carousel__next">Go to next slide</a>
class="carousel__slide">
    </li>
<div class="carousel__snapper"></div>
    <li id="carousel__slide3"
<span class="carousel__prev">Go to previous slide</span>
        tabindex="0"
<span class="carousel__next">Go to next slide</span>
        class="carousel__slide">
</li>
      <div class="carousel__snapper"></div>
<li id="carousel__slide4"
      <a href="#carousel__slide2"
tabindex="0"
        class="carousel__prev">Go to previous slide</a>
class="carousel__slide">
      <a href="#carousel__slide4"
<div class="carousel__snapper"></div>
        class="carousel__next">Go to next slide</a>
<span class="carousel__prev">Go to previous slide</span>
    </li>
<span class="carousel__next">Go to first slide</span>
    <li id="carousel__slide4"
</li>
        tabindex="0"
</ol>
        class="carousel__slide">
<aside class="carousel__navigation">
      <div class="carousel__snapper"></div>
<ol class="carousel__navigation-list">
      <a href="#carousel__slide3"
<li class="carousel__navigation-item">
        class="carousel__prev">Go to previous slide</a>
<span class="carousel__navigation-button">Go to slide 1</span>
      <a href="#carousel__slide1"
</li>
        class="carousel__next">Go to first slide</a>
<li class="carousel__navigation-item">
    </li>
<span class="carousel__navigation-button">Go to slide 2</span>
  </ol>
</li>
  <aside class="carousel__navigation">
<li class="carousel__navigation-item">
    <ol class="carousel__navigation-list">
<span class="carousel__navigation-button">Go to slide 3</span>
      <li class="carousel__navigation-item">
</li>
        <a href="#carousel__slide1"
<li class="carousel__navigation-item">
          class="carousel__navigation-button">Go to slide 1</a>
<span class="carousel__navigation-button">Go to slide 4</span>
      </li>
</li>
      <li class="carousel__navigation-item">
</ol>
        <a href="#carousel__slide2"
</aside>
          class="carousel__navigation-button">Go to slide 2</a>
      </li>
      <li class="carousel__navigation-item">
        [[#carousel__slide3|class=carousel__navigation-button]]<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>
</div>
</div>

Menu de navegação