|
|
| Line 10: |
Line 10: |
| | position: relative; | | position: relative; |
| | | | |
| − | }
| |
| − |
| |
| − | $dot-color: rgba(255,255,255,0.8);
| |
| − | $dot-active-color: #29acbb;
| |
| − | $fade-time: 400ms;
| |
| − | $autoplay-time: 5s;
| |
| − |
| |
| − |
| |
| − | [data-am-gallery] {
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background-color: #fff;
| |
| − | input[type="radio"] {
| |
| − | position: fixed;
| |
| − | top: -9999px;
| |
| − | &:checked {
| |
| − | $i: 5;
| |
| − | @while $i > 0 {
| |
| − | &:nth-child(#{$i}) {
| |
| − | ~ .images {
| |
| − | .image:nth-child(#{$i}) {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | ~ .navigation {
| |
| − | .dot:nth-child(#{$i}) {
| |
| − | background-color: $dot-active-color;
| |
| − | &:hover {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | $i: $i - 1;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .image {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | opacity: 0;
| |
| − | transition: opacity $fade-time ease;
| |
| − | background-size: cover;
| |
| − | background-position: center;
| |
| − | background-repeat: no-repeat;
| |
| − | }
| |
| − |
| |
| − | /* Navigation */
| |
| − |
| |
| − | .navigation {
| |
| − | position: absolute;
| |
| − | bottom: 15px;
| |
| − | left: 50%;
| |
| − | transform: translateX(-50%);
| |
| − | }
| |
| − |
| |
| − | .dot {
| |
| − | display: inline-block;
| |
| − | width: 15px;
| |
| − | height: 15px;
| |
| − | margin: 0 2px;
| |
| − | border-radius: 50%;
| |
| − | background-color: $dot-color;
| |
| − | cursor: pointer;
| |
| − | transition: opacity 200ms ease;
| |
| − | &:hover {
| |
| − | opacity: 0.8;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /* Base */
| |
| − |
| |
| − | body {
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .container {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | box-shadow: 0 0 20px rgba(0,0,0,0.1);
| |
| | } | | } |
| | </style> | | </style> |
| | <body> | | <body> |
| − | <div class="container">
| |
| − |
| |
| − | <div data-am-gallery>
| |
| − |
| |
| − | <!-- Radio -->
| |
| − | <input type="radio" name="gallery" id="img-1" checked />
| |
| − | <input type="radio" name="gallery" id="img-2" />
| |
| − | <input type="radio" name="gallery" id="img-3" />
| |
| − |
| |
| − | <!-- Images -->
| |
| − | <div class="images">
| |
| − | <div class="image" style="background-image: url(https://images.unsplash.com/photo-1433190152045-5a94184895da?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div>
| |
| − | <div class="image" style="background-image: url(https://images.unsplash.com/photo-1440557653082-e8e186733eeb?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div>
| |
| − | <div class="image" style="background-image: url(https://images.unsplash.com/photo-1449057528837-7ca097b3520c?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Navigation -->
| |
| − | <div class="navigation">
| |
| − | <label class="dot" for="img-1"></label>
| |
| − | <label class="dot" for="img-2"></label>
| |
| − | <label class="dot" for="img-3"></label>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
