css - Remove id from html to reuse code -
i trying reuse image slider in multiple places on website because of ids cannot this.
i got code old code pen little more complex use wondering if can me this.
this html :
@import url(https://fonts.googleapis.com/css?family=varela+round); .slides * { user-select: none; -webkit-user-select: none; -webkit- touch-callout: none; } .slides { padding: 0; margin: 0 auto; width: 200px; height: 300px; display: block; position: relative; } .slides input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 200px; height: 300px; display: block; position: absolute; transform: scale(0); transition: .7s slide; } .slide img { width: 100%; height: 100%; } .nav label { width: 50px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #fff; font-size: 75pt; text-align: center; line-height: 380px; font-family: "varela round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: -20px; left: 26%; height: 11px; display: block; position: absolute; } .nav-dots .nav-dot { top: -5px; width: 5px; height: 5px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(180, 180, 180, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(44, 44, 44, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8); }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h3>mate</h3> <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <img src="img/1.jpg"/> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <img src="img/2.jpg" /> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="slide"> <img src="img/3.jpg" /> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-2" class="nav-dot" id="img-dot-3"></label> </li> </ul> </body> </html>majority of css style know feel necessary include context.
use code as-is, inputs , label-fors.
the reason couldn't work ids didn't match. if change id on input, must update label accordingly (in each case).
each image in codepen has input id associated it, it's important if change id update label; code should work
@import url(https://fonts.googleapis.com/css?family=varela+round); h3 { text-align: center; font-size: 2em; font-weight: bold; } html, body { background: #fff; } .slides * { user-select: none; -webkit-user-select: none; -webkit- touch-callout: none; } .slides { padding: 0; margin: 0 auto; width: 200px; height: 300px; display: block; position: relative; } .slides input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 200px; height: 300px; display: block; position: absolute; transform: scale(0); transition: .7s slide; } .slide img { width: 100%; height: 100%; } .nav label { width: 50px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #fff; font-size: 75pt; text-align: center; line-height: 380px; font-family: "varela round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover+.nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked+.slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked+.slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: -20px; left: 26%; height: 11px; display: block; position: absolute; } .nav-dots .nav-dot { top: -5px; width: 5px; height: 5px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(180, 180, 180, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(44, 44, 44, 0.8); } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked+.slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked+.slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center; } .nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked~.nav-dots label#img-dot-1, input#img-2:checked~.nav-dots label#img-dot-2, input#img-3:checked~.nav-dots label#img-dot-3, { background: rgba(0, 0, 0, 0.8); }<body> <h3>mate</h3> <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <img src="http://www.rachelgallen.com/images/babytiger.jpg" /> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <img src="http://www.rachelgallen.com/images/snowdrops.jpg" /> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="slide"> <img src="http://www.rachelgallen.com/images/daffodils1.jpg" /> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> </li> </ul> </body>hope helps
Comments
Post a Comment