8 974
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 1: | Linha 1: | ||
<h1>CSS-only Carousel</h1> | |||
<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> | </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> |