django/pycharm 无法实现轮播图

css代码

#banner1{
    width: 1050px;
    height: 380px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 16px;
    overflow:hidden;
    z-index:1;
}
#picbox{
    width:5250px;
    height:380px;
    position:absolute;
    top:0px;
    left:0px;
}
.pics{
    width:1050px;
    height:380px;
    float:left;
}
#pic1{
    background:url(../images/gg1.jpg);
}
#pic2{
    background:url(../images/gg2.jpg);
}
#pic3{
    background:url(../images/gg3.jpg);
}
#pic4{
    background:url(../images/gg4.jpg);
}
#pic5{
    background:url(../images/gg5.jpg);
}


#nav{
    width:200px;
    height:22px;
    position:absolute;
    bottom:10px;
    left:465px;
}
.anvli{
    width:18px;
    height:16px;
    float:left;
    margin-right:8px;
    cursor:pointer;
    background:url(../images/dot.png) 0px -16px;
}
.navnow{
    background:url(../images/dot.png) 0px 0px;
}
.hbut{
    width:60px;
    height:90px;
    position:absolute;
    top:140px;
    cursor:pointer;
}

html代码

<div id="banner1">
  <div id="picbox">
    <div id="pic1" class="pics"></div>
    <div id="pic2" class="pics"></div>
    <div id="pic3" class="pics"></div>
    <div id="pic4" class="pics"></div>
    <div id="pic5" class="pics"></div>
  </div>
  <div id="nav">
    <li id="navli1" class="anvli navnow" value="1"></li>
    <li id="navli2" class="anvli" value="2"></li>
    <li id="navli3" class="anvli" value="3"></li>
    <li id="navli4" class="anvli" value="4"></li>
    <li id="navli5" class="anvli" value="5"></li>
  </div>
  <div id="pre" class="hbut"></div>
  <div id="next" class="hbut"></div>
</div>
  <!-- 轮播banner 结束 --> 

效果图（不能轮播，只能显示一张图）

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：PyCharm在django自带的数据库中命令创表

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 以帮助更多的人 ^-^