8 974
edições
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"> | ||
<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> | ||
</li> | </li> | ||
Linha 16: | Linha 18: | ||
class="carousel__slide"> | class="carousel__slide"> | ||
<div class="carousel__snapper"></div> | <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> | ||
<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> | ||
<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> | ||
<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> | ||
<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> | </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"> | ||
<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"> | ||
<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"> | ||
<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"> | ||
<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> |