手动轮播图（纯css实现）

在一些app上，我们经常能见到一些向左滑向右滑显示更多图片的样式，今天与大家分享一下这种手动轮播图的制作方法，只需要css就好。

核心思想：利用超出部分滚动原理，在固定的宽高之中，设置子元素超出固定宽高，再次在子元素的基础上设置新的内容和设置宽高。

代码：

        <div class="bigd">
            <div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </div>
        </div>

 

css代码，用到了sass，转换成css就是括号中的是它的子元素

    .bigd{
        height: 20%;
        width: 100%;
        overflow-x: scroll;
        border: 1px solid red;
        box-sizing: border-box;
        div{
            width: 300%;
            height: 90%;
            border: 1px solid black;

            div{
                width: 25%;
                height: 90%;
                border: 1px solid blue;
                float: left;
                box-sizing: border-box;

            }
        }
    }

最后效果：