Geek Answers Handbook

How to convert a list item to a slider when the browser is less than 640 pixels?

I want to make it a slider with a pager and touch only in mobile mode. I don't know very well 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%; }
+6
source share
1 answer

First, make sure you download the slick library from the link you provided. The "/ slick" folder should be in the same directory as your HTML code.

Add the following lines to <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 <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>
0
source

More articles:


All Articles