Menu
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 :)
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%;
}
701
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.
Add the following lines to your <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
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
