css实现图片左右滑动

1.脚本

<div class="show-pic">

        <div class="title">

                  <h2>图片展示</h2>

         </div>

        <div id="picContent"class="pic-content">

               <ul>

                   <li>图片1</li>

                    <li>图片2</li>

                   <li>图片3</li>

                   <li>图片4</li>

                   <li>图片5</li>

                   <li>图片6</li>

                   <li>图片7</li>

                   <li>图片8</li>

                  <li>图片9</li>

                  <li>图片10</li>

            </ul>

       </div>

</div>

2.css样式

<style>

#picContent {

position:relative;

    overflow-x:auto;

    width:100%;

    height:400px;

    margin:0 0;

}

#picContent ul {

    position:absolute;

    left:0;

    top:0;

    display:flex;

    flex-wrap:nowrap;

    overflow-x:scroll;

}
#picContent ul li {

     float:left;

    width:200px;

    min-height:400px;

    margin-right:20px;

    margin-top:10px;

    background:#0ff;

    text-align:center;

    list-style:none;

}

</style>

div 横向排版，出现滑块

.box-div {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}