javascript - Creating a picture slider for a website -
i trying create picture slider on website i'm building.
when searching examples online, i've found complex examples great amounts of javascript code or suggestions use dreamweaver-type software.
isn't there simple, html5 integrated/built-in way create picture slider?
try out slick plugin, it's useful carousels.
documentation here: http://kenwheeler.github.io/slick/
add <head> tag initialize plugin default style:
link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css"/> // add slick-theme.css if want default styling <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css"/> then before </body> tag do:
script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script> example:
html
<div data-slick='{"slidestoshow": 4, "slidestoscroll": 4}'> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </div> js
// on swipe event $('.your-element').on('swipe', function(event, slick, direction){ console.log(direction); // left }); // on edge hit $('.your-element').on('edge', function(event, slick, direction){ console.log('edge hit') }); // on before slide change $('.your-element').on('beforechange', function(event, slick, currentslide, nextslide){ console.log(nextslide); }); this example taken from: https://github.com/kenwheeler/slick
Comments
Post a Comment