Ybooh: mudanças entre as edições

Ir para navegação Ir para pesquisar

Ybooh (ver código-fonte)

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

1 255 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="slideshow">
 
   <div class="slide active">
 
     <img src="https://s.cdpn.io/6234/railcars.jpg" alt="" class="horizontal" />
<div class="carousel" aria-label="Gallery">
   <ol class="carousel__viewport">
    <li id="carousel__slide1"
        tabindex="0"
        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>
  <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">
        [[#carousel__slide2]]
      </li>
      <li class="carousel__navigation-item">
        [[#carousel__slide3]]
        <p 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>
  <div class="slide">
    <img src="https://s.cdpn.io/6234/old-man.jpg" alt="" class="vertical" />
  </div>
  <div class="slide">
    <img src="https://s.cdpn.io/6234/girl.jpg" alt="" class="horizontal" />
  </div>
  <div class="slide last">
    <img src="https://s.cdpn.io/6234/dandelion.jpg" alt=""  class="vertical" />
  </div>
  <div class="overlay overlay-shadow"></div>
  <div class="overlay overlay-highlight"></div>
</div>
<div class="slideshow-effects">
 
</div>
<div class="slideshow-nav">
  <a href="#" class="nav-link previous"><em class="icon-chevron-sign-left icon-2x"></em></a>a
  <a href="#" class="nav-link next"><em class="icon-chevron-sign-right icon-2x"></em></a>
</div>
</div>
Disponível em “https://wiki.otpokemon.com/index.php/Especial:MobileDiff/16296”

Menu de navegação