Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- * {
- margin: 0 auto;
- padding: 0;
- list-style: none;
- box-sizing: border-box;
- }
- #visual {
- width: 900px;
- height: 300px;
- position: relative;
- overflow: hidden;
- margin: 0 auto;
- }
- @keyframes slide {
- 0% { margin-left:0; }
- 20% { margin-left:0; }
- 25% { margin-left:-100%; }
- 45% { margin-left:-100%; }
- 50% { margin-left:-200%; }
- 70% { margin-left:-200%; }
- 75% { margin-left:-300%; }
- 95% { margin-left:-300%; }
- 100% { margin-left:0; }
- }
- .imgslide {
- width: 400%;
- height: 300px;
- float: left;
- position: relative;
- transition: all 0.5s;
- }
- .imgslide li {
- width: 25%;
- height: 600px;
- float: left;
- background-size: cover;
- background-position: center;
- }
- .imgslide li:nth-child(1) {
- background-image: url("http://placeimg.com/900/300/nature");
- }
- .imgslide li:nth-child(2) {
- background-image: url("http://placeimg.com/900/300/people");
- }
- .imgslide li:nth-child(3) {
- background-image: url("http://placeimg.com/900/300/tech");
- }
- .imgslide li:nth-child(4) {
- background-image: url("http://placeimg.com/900/300/arch");
- }
- .btns {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- background-color: #FFF;
- color: #000;
- text-align: center;
- line-height: 50px;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- display: block;
- z-index: 999;
- }
- .btns-left {
- left: 10px;
- }
- .btns-left::before {
- content: "<";
- }
- .btns-right {
- right: 10px;
- }
- .btns-right::before {
- content: ">";
- }
- .btns-right:focus + .imgslide {
- animation: 2s slide1 forwards;
- }
- label{
- width: 30px;
- height: 30px;
- background-color: #ddd;
- border: 1px solid #333;
- display: inline-block;
- text-align: center;
- line-height: 30px;
- cursor: pointer;
- }
- label:hover { background-color: red; color: white; }
- #s1:checked ~ .imgslide{left: 0}
- #s2:checked ~ .imgslide{left: -100%}
- #s3:checked ~ .imgslide{left: -200%}
- #s4:checked ~ .imgslide{left: -300%}
- .radio { display: none; }
- </style>
- </head>
- <body>
- <section id="visual">
- <label for="s1">1</label>
- <input type="radio" name="btn" id="s1" class="radio" checked>
- <label for="s2">2</label>
- <input type="radio" name="btn" id="s2" class="radio">
- <label for="s3">3</label>
- <input type="radio" name="btn" id="s3" class="radio">
- <label for="s4">4</label>
- <input type="radio" name="btn" id="s4" class="radio">
- <ul class="imgslide">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- </section>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement