响应式slick多张图片轮播代码

<div class="slick1">
            <div>
                <a class="inner" href="">
                    <div class="img">
                        <img src="images/s1.jpg">
                    </div>
                    <p>中国电信</p>
                </a>
            </div>
            <div>
                <a class="inner" href="">
                    <div class="img">
                        <img src="images/s2.jpg">
                    </div>
                    <p>中国电信</p>
                </a>
            </div>
            <div>
                <a class="inner" href="">
                    <div class="img">
                        <img src="images/s1.jpg">
                    </div>
                    <p>中国电信</p>
                </a>
            </div>
            <div>
                <a class="inner" href="">
                    <div class="img">
                        <img src="images/s3.jpg">
                    </div>
                    <p>中国电信</p>
                </a>
            </div>
        </div>

/*slick多张图片轮播 css*/
        .slick1 {
            position: relative;
            overflow: hidden;
            padding: 0 70px;
            margin:0 -7px;
        }
        .slick1 .inner {
            margin: 0 9px;
            display: block;
        }

        .slick1 .img {
            position: relative;
            padding-top: 56.213%;
            overflow: hidden;
            background-color: #e9e9e9;
        }

        .slick1 .img img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .slick1 p {
            text-align: center;
            font-size: 17px;
            line-height: 24px;
            padding: 25px;
            color: #666;
        }

        .slick1 a:hover {
            opacity: .8;
        }

        .slick1 a:hover p {
            color: #ca9535;
        }
        .slick1 .slick-prev,
        .slick1 .slick-next {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -41px;
            width: 41px;
            height: 41px;
            font-size: 0;
            border: none;
            background: url("../images/prev.png") no-repeat 0 0;
            outline: none;
            cursor: pointer;
        }

        .slick1 .slick-next {
            background: url("../images/next.png") no-repeat 0 0;
            left: auto;
            right: 0;
        }
        .slick1 .slick-prev:hover{
            background-image: url("../images/prev-hover.png");
        }
        .slick1 .slick-next:hover {
            background-image: url("../images/next-hover.png");
        }

/*slick多张图片轮播 jq*/
        <script type="text/javascript">
             $(function(){
                $(\'.slick1\').slick({
                    dots: false,
                    infinite: true,
                    slidesToShow: 3,
                    autoplay: true,
                    responsive: [
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 2
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 1
                            }
                        }
                    ]
                });
            });
        </script>