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