8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 578: | Linha 578: | ||
/* Tests */ | /* Tests */ | ||
/* | |||
* Slideshow | |||
*/ | |||
.slideshow { | .slideshow { | ||
max-width:640px; | |||
margin:0 auto; | |||
position:relative; | |||
} | |||
.slide_frame{ | |||
position:relative; | |||
padding-bottom:75%; | |||
width:100%; | |||
overflow:hidden; | |||
margin:0 auto | |||
} | |||
.slideshow-slides { | |||
height: 100%; | |||
position: absolute; | |||
width: 100%; | |||
/* left は JavaScript で指定 */ | |||
} | |||
.slideshow-slides .slide { | |||
height: 100%; | |||
overflow: hidden; | |||
position: absolute; | |||
width: 100%; | |||
/* left は JavaScript で指定 */ | |||
} | |||
.slideshow-slides .slide img{ | |||
width:100%; | |||
} | } | ||
.slideshow- | .slideshow-indicator { | ||
display:flex; | |||
justify-content:center; | |||
margin-top:10px; | |||
} | } | ||
. | .slideshow-indicator span{ | ||
width: 14px; | |||
height: 14px; | |||
border-radius: 7px; | |||
background-color: #ccc; | |||
cursor: pointer; | |||
margin:0 10px; | |||
} | } | ||
. | .slideshow-indicator span:first-child.active { | ||
cursor: default; | |||
background-color: #000; | |||
} | } | ||
. | .slideshow-indicator span.active { | ||
cursor: default; | |||
background-color: #000; | |||
} | } | ||
. | .slideshow-indicator span:before { | ||
margin-left: -110px; | |||
display: inline-block; | |||
font-size: 0; | |||
line-height: 0; | |||
} | } | ||
.slideshow- | .slideshow-indicator span.active:before { | ||
margin-left: -130px; | |||
} | } | ||
.slideshow | |||
.slideshow-nav span{ | |||
display: inline-block; | |||
padding: 0 0 0 16px; | |||
color: #000; | |||
vertical-align: middle; | |||
text-decoration: none; | |||
font-size: 15px; | |||
position: absolute; | |||
top: 50%; | |||
} | } | ||
.slideshow--nav:after { | .slideshow-nav span:before, | ||
.slideshow-nav span:after { | |||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
left: 0; | |||
margin: auto; | |||
content: ""; | |||
vertical-align: middle; | |||
} | } | ||
.slideshow | |||
.slideshow-nav span.prev { | |||
left:0; | |||
} | } | ||
.slideshow | .slideshow-nav span.prev:before{ | ||
box-sizing: border-box; | |||
width: 50px; | |||
height: 50px; | |||
background: rgba(169, 169, 169, 0.59); | |||
-webkit-border-radius: 50%; | |||
border-radius: 50%; | |||
} | } | ||
.slideshow | .slideshow-nav span.prev:after{ | ||
width: 20px; | |||
left: 125%; | |||
height: 20px; | |||
border-top: 2px solid #ffffff; | |||
border-right: 2px solid #ffffff; | |||
-webkit-transform: rotate(225deg); | |||
transform: rotate(225deg); | |||
} | |||
.slideshow-nav span.next { | |||
right:0; | |||
} | } | ||
.slideshow- | .slideshow-nav span.next:before, | ||
.slideshow-nav span.next:after{ | |||
left:auto; | |||
right:1px; | |||
} | } | ||
.slideshow-- | .slideshow-nav span.next:before{ | ||
box-sizing: border-box; | |||
width: 50px; | |||
height: 50px; | |||
background: rgba(169, 169, 169, 0.59); | |||
-webkit-border-radius: 50%; | |||
border-radius: 50%; | |||
} | } | ||
.slideshow-nav span.next:after{ | |||
width: 20px; | |||
right: 125%; | |||
height: 20px; | |||
border-top: 2px solid #ffffff; | |||
border-right: 2px solid #ffffff; | |||
-webkit-transform: rotate(45deg); | |||
transform: rotate(45 |