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 8: Linha 8:
         class="carousel__slide">
         class="carousel__slide">
       <div class="carousel__snapper">
       <div class="carousel__snapper">
         [[#carousel__slide4|class=carousel__prev|Go to last slide]]
         <a href="#carousel__slide4"
         [[#carousel__slide2|class=carousel__next|Go to next slide]]
          class="carousel__prev">Go to last slide</a>
         <a href="#carousel__slide2"
          class="carousel__next">Go to next slide</a>
       </div>
       </div>
     </li>
     </li>
Linha 16: Linha 18:
         class="carousel__slide">
         class="carousel__slide">
       <div class="carousel__snapper"></div>
       <div class="carousel__snapper"></div>
        [[#carousel__slide1|class=carousel__prev|Go to previous slide]]
      <a href="#carousel__slide1"
        [[#carousel__slide3|class=carousel__next|Go to next slide]]
        class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide3"
        class="carousel__next">Go to next slide</a>
     </li>
     </li>
     <li id="carousel__slide3"
     <li id="carousel__slide3"
Linha 23: Linha 27:
         class="carousel__slide">
         class="carousel__slide">
       <div class="carousel__snapper"></div>
       <div class="carousel__snapper"></div>
        [[#carousel__slide2|class=carousel__prev|Go to previous slide]]
      <a href="#carousel__slide2"
        [[#carousel__slide4|class=carousel__next|Go to next slide]]
        class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide4"
        class="carousel__next">Go to next slide</a>
     </li>
     </li>
     <li id="carousel__slide4"
     <li id="carousel__slide4"
Linha 30: Linha 36:
         class="carousel__slide">
         class="carousel__slide">
       <div class="carousel__snapper"></div>
       <div class="carousel__snapper"></div>
        [[#carousel__slide3|class=carousel__prev|Go to previous slide]]
      <a href="#carousel__slide3"
        [[#carousel__slide1|class=carousel__next|Go to first slide]]
        class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide1"
        class="carousel__next">Go to first slide</a>
     </li>
     </li>
   </ol>
   </ol>
Linha 37: Linha 45:
     <ol class="carousel__navigation-list">
     <ol class="carousel__navigation-list">
       <li class="carousel__navigation-item">
       <li class="carousel__navigation-item">
         [[#carousel__slide1|class=carousel__navigation-button|Go to slide 1]]
         <a href="#carousel__slide1"
          class="carousel__navigation-button">Go to slide 1</a>
       </li>
       </li>
       <li class="carousel__navigation-item">
       <li class="carousel__navigation-item">
         [[#carousel__slide2|class=carousel__navigation-button|Go to slide 2]]
         <a href="#carousel__slide2"
          class="carousel__navigation-button">Go to slide 2</a>
       </li>
       </li>
       <li class="carousel__navigation-item">
       <li class="carousel__navigation-item">
         [[#carousel__slide3|class=carousel__navigation-button|Go to slide 3]]
         <p href="#carousel__slide3"
          class="carousel__navigation-button">Go to slide 3</a>
       </li>
       </li>
       <li class="carousel__navigation-item">
       <li class="carousel__navigation-item">
         [[#carousel__slide4|class=carousel__navigation-button|Go to slide 4]]
         <a href="#carousel__slide4"
          class="carousel__navigation-button">Go to slide 4</a>
       </li>
       </li>
     </ol>
     </ol>
   </div>
   </div>
</div>
</div>
<div class="slidershow middle">
    <div class="slides">
      <input type="radio" name="r" id="r1" checked>
      <input type="radio" name="r" id="r2">
      <input type="radio" name="r" id="r3">
      <input type="radio" name="r" id="r4">
      <input type="radio" name="r" id="r5">
      <div class="slide s1">
        <img src="https://images.unsplash.com/photo-1547782793-e1444139967a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1556115908-233c785befbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1548438929-0b0e7342d732?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1548431001-424da3e6328f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
      <div class="slide">
        <img src="https://images.unsplash.com/photo-1559597748-34913c8ba036?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
      </div>
      <div id="controls">
<label for="r1" class="bar-arrow"></label>
        <label for="r2" class="bar-arrow"></label>
        <label for="r3" class="bar-arrow"></label>
        <label for="r4" class="bar-arrow"></label>
        <label for="r5" class="bar-arrow"></label>
</div>
      <div class="navigation">
        <label for="r1" class="bar"></label>
        <label for="r2" class="bar"></label>
        <label for="r3" class="bar"></label>
        <label for="r4" class="bar"></label>
        <label for="r5" class="bar"></label>
      </div>   
    </div>
   
  </div>

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

CSS-only Carousel


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

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

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

  4.      <a href="#carousel__slide3"
        class="carousel__prev">Go to previous slide</a>
     <a href="#carousel__slide1"
        class="carousel__next">Go to first slide</a>
  1. <a href="#carousel__slide1" class="carousel__navigation-button">Go to slide 1</a>
  2. <a href="#carousel__slide2" class="carousel__navigation-button">Go to slide 2</a>

  3. Go to slide 3</a>

  4. <a href="#carousel__slide4" class="carousel__navigation-button">Go to slide 4</a> 
     <input type="radio" name="r" id="r1" checked>
     <input type="radio" name="r" id="r2">
     <input type="radio" name="r" id="r3">
     <input type="radio" name="r" id="r4">
     <input type="radio" name="r" id="r5">

       <img src="https://images.unsplash.com/photo-1547782793-e1444139967a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">

       <img src="https://images.unsplash.com/photo-1556115908-233c785befbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">

       <img src="https://images.unsplash.com/photo-1548438929-0b0e7342d732?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">

       <img src="https://images.unsplash.com/photo-1548431001-424da3e6328f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">

       <img src="https://images.unsplash.com/photo-1559597748-34913c8ba036?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">

<label for="r1" class="bar-arrow"></label> 

       <label for="r2" class="bar-arrow"></label>
       <label for="r3" class="bar-arrow"></label>
       <label for="r4" class="bar-arrow"></label>
       <label for="r5" class="bar-arrow"></label>

       <label for="r1" class="bar"></label>
       <label for="r2" class="bar"></label>
       <label for="r3" class="bar"></label>
       <label for="r4" class="bar"></label>
       <label for="r5" class="bar"></label>
Disponível em “https://wiki.otpokemon.com/index.php?title=Ybooh&oldid=16289”