当浏览器小于640px时如何将列表项转换为滑块？

Question

我想使用仅在移动视图中启用寻呼机和触摸的滑块.我不是很熟悉如何使用jQuery/JavaScript所以我希望你们能帮助我:)

HTML:

<div class="slider">
    <div class="slide"><a href="#"><img src="images/createacct-icon.png" alt=""><span>Create Account</span></a></div>
    <div class="slide"><a href="#"><img src="images/findgame-icon.png" alt=""><span>Find Your Game</span></a></div>
    <div class="slide"><a href="#"><img src="images/createjoin-icon.png" alt=""><span>Create / Join Team</span></a></div>
    <div class="slide"><a href="#"><img src="images/compete-icon.png" height="75" alt=""><span>Compete & Win</span></a></div>
</div>

CSS:

.slider {
    margin-top: 30px;
    font-family: 'Sintony';
}

.slider .slide {
    float: left;
    width: 22.3%;
    padding: 2% 0;
    background: #191f2e;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
}

.slider .slide:hover {
    background: #151a28;
    transition: background .3s ease;
}

.slider .slide a span {
    color: #c9cbce;
    margin-top: 22px;
    display: block;
}

.slider .slide img {
    display: block;
    margin: 0 auto;
}

.slider .slide:nth-of-type(2),
.slider .slide:nth-of-type(3),
.slider .slide:nth-of-type(4) {
    margin-left: 3.6%;
}

Answer 1

首先，确保您已从您提供的链接下载了 slick 库。“/slick”文件夹应与 HTML 代码位于同一目录中。

将以下行添加到您的<head>

<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

将这些行添加到您的<body>以导入库

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

那么你的代码应该是：

 <script>

    resizeWindow();
    window.addEventListener('resize', resizeWindow);
    function resizeWindow(){
        $('.slider').slick({
            responsive: [
                {
                    breakpoint: 2500,
                    settings: "unslick"
                },
                {
                    breakpoint: 640,
                    settings: {
                        dots: true
                  }
                }
            ]
        });
    }

 </script>