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

Question

I want to make it slider with pager and touch enabled only in mobile view. 我想使用仅在移动视图中启用寻呼机和触摸的滑块。 I'm not really familiar how to use jQuery/JavaScript so I hope you guys can help me :) 我不是很熟悉如何使用jQuery / JavaScript所以我希望你们能帮助我:)

HTML: 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: 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

First, make sure you have downloaded the slick library from the link that you provided. 首先，确保已从您提供的链接下载了光滑的库。 The "/slick" folder should be in the same directory as your HTML code. “/ slick”文件夹应与HTML代码位于同一目录中。

Add the following lines to your <head> 将以下行添加到<head>

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

Add these lines to your <body> to import the library 将这些行添加到<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>

Then your code should be: 那你的代码应该是：

 <script>

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

 </script>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-21 11:29:17

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-21 11:29:17

解决方案1
0 已采纳 2015-11-21 11:29:17