使用下一个上一个按钮（如使用jquery的图片库）时，z-index图片未显示

Question

 $(document).ready(function(){ $(".divs div.panel").each(function(e) { if (e > 2) $(this).hide(); console.log(e); }); $("#next").click(function(){ if ($(".divs div.panel:visible:last").next().length != 0){ $(".divs div.panel:visible:last").next().show(); $(".divs div.panel:visible:last").next().show(); $(".divs div.panel:visible:first").hide(); $(".divs div.panel:visible:first").hide(); } else { //either hide the next button or show 1st two again. :) } return false; }); $("#prev").click(function(){ if ($(".divs div.panel:visible:first").prev().length != 0){ var curVisLen = $(".divs div.panel:visible").length; $(".divs div.panel:visible:first").prev().show(); $(".divs div.panel:visible:first").prev().show(); $(".divs div.panel:visible:last").hide(); if(curVisLen == 3){ $(".divs div.panel:visible:last").hide(); } } else { // either hide the button or show last two divs // $(".divs div.panel:visible").hide(); // $(".divs div.panel:last").show(); } return false; }); }); 

 body{ background-color: grey; } .dash-img-dv{ position: absolute; width: 170px; height: 221px; -moz-box-shadow: inset 5px -59px 63px 4px #5642BE; -webkit-box-shadow: inset 5px -59px 63px 4px #5642BE; box-shadow: inset 5px -59px 63px 4px #5642BE; } .dash-img-dv img { width: 170px; height: 221px; position: relative; z-index: -1; } .dash-img-dv-ttle{ position: relative; width: 153px; height: 50px; color: #fff; margin-left: 16px; margin-top: 167px; z-index: 1; } .panel{ display: inline-block; margin-left: 10px; } .gallery { background: #CCC; position: relative; margin: 0 auto; padding-top: 22px; } .prev-next-button { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: #5642BE; transform: translateY(-50%); } .prev-next-button a{ color: #fff; position: absolute; left: 28%; top: 21%; } .previous { left: -16px; } .next { right: -16px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gallery"> <div class="divs"> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title1</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title2</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title3</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title4</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title5</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title6</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title7</p> </div> </div> </div> <!-- <a id="prev">prev</a> <a id="next">next</a> --> <div class="prev-next-button previous"> <a id="prev"><span class="fa fa-chevron-left"></span></a> </div> <div class="prev-next-button next"> <a id="next"><span class="fa fa-chevron-right"></span></a> </div> </div> 

I want to show my next previous div with images using jquery. I tried something like bellow.Everything is almost fine but problem is now that the images is not showing. Is there any z-index problem or something like that? I could not find the reason why images are not showing. Would anyone please help me to show the images?Here is the image bellow before write the script

Answer 1

The negative z-index on the image will push it behind everything else on the page that isn't positioned. Add a z-index to .panel so that the negative z-index on the image doesn't push it behind .panel and keeps it between .panel and the element with the inner box shadow you want it to appear below.

 $(document).ready(function(){ $(".divs div.panel").each(function(e) { if (e > 2) $(this).hide(); console.log(e); }); $("#next").click(function(){ if ($(".divs div.panel:visible:last").next().length != 0){ $(".divs div.panel:visible:last").next().show(); $(".divs div.panel:visible:last").next().show(); $(".divs div.panel:visible:first").hide(); $(".divs div.panel:visible:first").hide(); } else { //either hide the next button or show 1st two again. :) } return false; }); $("#prev").click(function(){ if ($(".divs div.panel:visible:first").prev().length != 0){ var curVisLen = $(".divs div.panel:visible").length; $(".divs div.panel:visible:first").prev().show(); $(".divs div.panel:visible:first").prev().show(); $(".divs div.panel:visible:last").hide(); if(curVisLen == 3){ $(".divs div.panel:visible:last").hide(); } } else { // either hide the button or show last two divs // $(".divs div.panel:visible").hide(); // $(".divs div.panel:last").show(); } return false; }); }); 

 body{ background-color: grey; } .dash-img-dv{ position: absolute; width: 170px; height: 221px; -moz-box-shadow: inset 5px -59px 63px 4px #5642BE; -webkit-box-shadow: inset 5px -59px 63px 4px #5642BE; box-shadow: inset 5px -59px 63px 4px #5642BE; } .dash-img-dv img { width: 170px; height: 221px; position: relative; z-index: -1; } .dash-img-dv-ttle{ position: relative; width: 153px; height: 50px; color: #fff; margin-left: 16px; margin-top: 167px; z-index: 1; } .panel{ display: inline-block; margin-left: 10px; position: relative; z-index: 1; } .gallery { background: #CCC; position: relative; margin: 0 auto; padding-top: 22px; } .prev-next-button { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: #5642BE; transform: translateY(-50%); } .prev-next-button a{ color: #fff; position: absolute; left: 28%; top: 21%; } .previous { left: -16px; } .next { right: -16px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gallery"> <div class="divs"> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title1</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title2</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title3</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title4</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title5</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title6</p> </div> </div> <div class="panel"> <div class="dash-img-dv"> <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg"> </div> <div class="dash-img-dv-ttle"> <p>This is title7</p> </div> </div> </div> <!-- <a id="prev">prev</a> <a id="next">next</a> --> <div class="prev-next-button previous"> <a id="prev"><span class="fa fa-chevron-left"></span></a> </div> <div class="prev-next-button next"> <a id="next"><span class="fa fa-chevron-right"></span></a> </div> </div>