Javascript 手动幻灯片放映

我在我的网站上工作，我希望这个div包含无序列表中的图像，两个div在单击左或右div时一次显示一张图片，就像手动幻灯片放映一样。我认为我对z-index有问题，因为出于某种原因，我不认为我被允许点击div。或者它可能是我的JQuery。请看一看，帮帮我

HTML:

CSS:

<div id="bottomLeft">
    <ul>
        <li><img src="image/10pc.jpg" /></li>
        <li><img src="slideImages/chicken0.jpg" /></li>
        <li><img src="slideImages/chicken1.jpg" /></li>
        <li><img src="slideImages/chicken2.jpg" /></li>
    </ul>
    <div id="leftArrow">left</div>
    <div id="rightArrow">right</div>
</div>

$('#rightArrow').click(function() {
    $('#bottomLeft li[visibility="visible"]').attr("visibility","hidden").next.attr("visibility","visible");
});

#bottomLeft{
    float: left;
    width: 50%;
    height: 25.9em;
    /*background-color: limegreen;*/
    top:0;
    /*background-image: url(image/10pc.jpg);*/
    position:relative;
    z-index: -1;
}
#bottomLeft ul li img{
    width: 100%;
    height: 25.9em;
    position: absolute;
    z-index: -5;
}
#bottomLeft ul li{
    text-decoration:none;
    margin: 0;
    padding: 0;
}
#bottomLeft ul{
    list-style-type:none;
    margin: 0;
    padding: 0;
    z-index: -5;
}
#bottomLeft ul li:not(:first-child){
    visibility:hidden;
}