Ybooh: mudanças entre as edições

De otPokemon Wiki
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
<div class="content">
<h1>CSS-only Carousel</h1>
      <div class="slides">
 
        <div class="slide_content 1">
 
          <span class="show">This is the first contest to Slide-show</span>
<div class="carousel" aria-label="Gallery">
         </div>
  <ol class="carousel__viewport">
         <div class="slide_content 2">
    <li id="carousel__slide1"
          <span class="show">This is the second contest to Slide-show</span>
         tabindex="0"
         </div>
         class="carousel__slide">
        <div class="slide_content 2">
      <div class="carousel__snapper">
          <span class="show">This is the third contest to Slide-show</span>
         <a href="#carousel__slide4"
         </div>
          class="carousel__prev">Go to last slide</a>
        <div class="slide_content 4">
         <a href="#carousel__slide2"
          <span class="show">This is the fourth contest to Slide-show</span>
          class="carousel__next">Go to next slide</a>
        </div>
       </div>
       </div>
     </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>
  <div 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>
  </div>
</div>

Edição das 19h21min de 24 de julho de 2023

CSS-only Carousel