小编nyj*_*n24的帖子

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

我想使用仅在移动视图中启用寻呼机和触摸的滑块.我不是很熟悉如何使用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>
Run Code Online (Sandbox Code Playgroud)

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; …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery

6
推荐指数
1
解决办法
868
查看次数

标签 统计

css ×1

javascript ×1

jquery ×1