|
|
Linha 578: |
Linha 578: |
|
| |
|
| /* Tests */ | | /* Tests */ |
| /*
| |
| * 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-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-indicator span.active:before {
| |
| margin-left: -130px;
| |
| }
| |
|
| |
|
| .slideshow-nav span{ | | .slideshow-container { |
| display: inline-block;
| | display: block; |
| padding: 0 0 0 16px;
| | max-width: 400px; |
| color: #000;
| | position: relative; |
| vertical-align: middle;
| | margin: auto; |
| text-decoration: none;
| | overflow: hidden; |
| font-size: 15px;
| | } |
| position: absolute;
| |
| top: 50%;
| |
| }
| |
| .slideshow-nav span:before,
| |
| .slideshow-nav span:after {
| |
| position: absolute;
| |
| top: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| margin: auto;
| |
| content: "";
| |
| vertical-align: middle; | |
| } | |
|
| |
|
| .slideshow-nav span.prev { | | .slide { |
| left:0;
| | display: block; |
| }
| | position: absolute; |
| .slideshow-nav span.prev:before{
| | width: 100%; |
| box-sizing: border-box;
| | height: 300px; /* Altura da imagem */ |
| width: 50px;
| | opacity: 0; |
| height: 50px;
| | transition: opacity 1s; |
| background: rgba(169, 169, 169, 0.59);
| | } |
| -webkit-border-radius: 50%;
| |
| border-radius: 50%;
| |
| }
| |
| .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);
| |
| } | |
|
| |
|
| | .slide img { |
| | width: 100%; |
| | height: 100%; |
| | object-fit: cover; |
| | } |
|
| |
|
| .slideshow-nav span.next {
| | /* Efeito de transição do slideshow */ |
| right:0;
| | .slideshow-container .slide:first-child { |
| }
| | animation: fade 6s infinite; |
| .slideshow-nav span.next:before, | | } |
| .slideshow-nav span.next:after{
| | |
| left:auto;
| | @keyframes fade { |
| right:1px;
| | 0%, 20% { |
| } | | opacity: 1; |
| .slideshow-nav span.next:before{
| | } |
| box-sizing: border-box; | | 25%, 100% { |
| width: 50px;
| | opacity: 0; |
| 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
| |