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”文件夹应与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>

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

1 个答案: