How do I incorporate arrows in my css/html image slider?
I am trying to add arrows on the left and right side of the slider but even though the arrows Z-index is lower than the navigations Z-index, the surface above the arrows is not clickable.
Everything else works, but you can’t have an image slider where the arrows are not clickable even though the surroundings of it is.
Please I have tried everything, my mind could come up with. Do you have any idea what could cause this problem? And how to fix it?
body { margin: 0; } #container { width: 960px; height: 740px; position: relative; margin: 0px; } #container input { display: none; } .images { width: 100%; height: 100%; position: absolute; } .images img { width: 100%; height: 100%; margin: 0px; } .prev, .next { height: 100%; width: 12%; position: absolute; top: 0; transition: .15s; z-index: 100; margin: 0px; } .prev:hover, .next:hover { cursor: pointer; /* background: rgba(10, 10, 10, .5);*/ } .prev { left: 0 } .next { right: 0 } #nav { width: 100%; height: 35px; position: absolute; bottom: 0px; text-align: center; cursor: arrow; z-index: 100; } .dots { width: 12px; height: 12px; margin: 0 4px; border-radius: 50%; background: rgba(10, 10, 10, .7); position: relative; display: inline-block; cursor: pointer; } .dots:hover { *background: rgba(245, 245, 245, .7); } #one, #two, #three { z-index: -1; } #inp1:checked~#one, #inp2:checked~#two, #inp9:checked~#three { z-index: 10; } #inp1:checked~#nav #dot1, #inp2:checked~#nav #dot2, #inp9:checked~#nav #dot3 { background: white; opacity: 70%; } .arrow:hover { cursor: pointer; } .arrow { border: solid white; border-width: 0 6px 6px 0; display: inline-block; padding: 10px; color: white; opacity: 70%; margin: 0px; z-index: 11; left: 0; right: 0; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: relative; left: 900px; top: 400px; } .left { transform: rotate(135deg); position: relative; top: 400px; right: 0px; }<div id='container'> <input type='radio' name="image" id='inp1' checked> <input type='radio' name="image" id='inp2'> <input type='radio' name="image" id='inp3'> <i class="arrow right"></i> <i class="arrow left"></i> <div class='images' id='one'> <img src='img/image1.jpeg'> <label for='inp3' class='prev'></label> <label for='inp2' class='next'></label> </div> <div class='images' id='two'> <img src='img/image2.jpeg'> <label for='inp1' class='prev'></label> <label for='inp3' class='next'></label> </div> <div class='images' id='three'> <img src='img/image3.jpeg'> <label for='inp2' class='prev'></label> <label for='inp1' class='next'></label> </div> <div id='nav'> <label class='dots' id='dot1' for='inp1'></label> <label class='dots' id='dot2' for='inp2'></label> <label class='dots' id='dot3' for='inp3'></label> </div> </div>
