მიმდინარეობს გვერდის ჩატვირთვა...
01:22 სლაიდერი | |
Code <div class="slider 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"> <div class="slide s1"> <img src="https://ia.wampi.ru/2020/11/13/004.jpg" class="img"> </div> <div class="slide"> <img src="https://ia.wampi.ru/2020/11/13/003.jpg" class="img"> </div> <div class="slide"> <img src="https://ia.wampi.ru/2020/11/13/002.jpg" class="img"> </div> <div class="slide"> <img src="https://ia.wampi.ru/2020/11/13/001.jpg" class="img"> </div> </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> </div> </div> <style> * { margin: 0; padding: 0; } .slider { width: 800px; height: 500px; overflow: hidden; border: 10px solid #000; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .navigation { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; } .bar { width: 30px; height: 8px; margin: 6px; cursor: pointer; background-color: #000; opacity: .5; border-radius: 10px; transition: all 0.4s ease; } .bar:hover { opacity: 1; transform:scale(1.1); } input[name="r"] { position: absolute; visibility: hidden; } .slides { width: 400%; height: 100%; display: flex; } .slide { width: 25%; transition: all 0.6s ease; } .img { width: 100%; height: 100%; } #r1:checked ~ .s1 { margin-left: 0; } #r2:checked ~ .s1 { margin-left: -25%; } #r3:checked ~ .s1 { margin-left: -50%; } #r4:checked ~ .s1 { margin-left: -75%; } </style> | |
|
სულ კომენტარები: 4 | |
|