background preloader

Slick - the last carousel you'll ever need

Slick - the last carousel you'll ever need
Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file.

Related:  Javascript librariesjquery is awesome!Galerie ImgJS/jQueryWeb UI

Minimal Form Interface A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website. View demo Download source Today we’d like share a very simplistic form interface with you. You’ve probably seen this kind of single input view form in several modern websites. We spotted one in the end of the PageLanes website and thought that this is a really nice and user-friendly concept for a form.

jQuery Waterwheel Image Carousel This jQuery plugin can display images with a cascading "waterwheel" effect. It can be positioned either horizontally or vertically, and it's appearance can be dramatically altered. The callback functions can be used to programatically trigger Lightbox-type effects, or load specific content into another region of the website, such as an image description. Responsly.js Demo What Dead simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available, more to come! Why Responsive designs are cool!

Generate Websites from JSON, Markdown, and Mustache Templates using Punch A few months ago, I switched this blog from Wordpress to Jekyll. I love how Jekyll allows me to prepare everything locally and simply publish when it's ready. There's no server-side logic involved, which means I can host the whole blog in a S3 bucket. Also, there's no more worries on mundane issues like security, performance or database corruptions. I wanted to have this freedom and control in any site that I would create and manage.

rangeslider.js Features Touchscreen friendly Recalculates onresize so suitable for use within responsive designs Small and fast The rangeslider.js API is compatible with the standard HTML input methods. $('input[type="range"]').val(10).change(); Simply calling something like this will just work. Browser Support Filtrify - Multiple categories <div id="placeHolder"></div><ul id="container"><li data-genre="Drama, Sci-Fi, Thriller" data-main-actors="Harrison Ford, Rutger Hauer, Sean Young, Edward James Olmos" data-director="Ridley Scott"> ... Blade Runner ... </li><li data-genre="Action, Crime, Drama, Thriller" data-main-actors="Christian Bale, Michael Caine, Ken Watanabe, Liam Neeson" data-director="Christopher Nolan"> ... Batman Begins ... </li><li data-genre="Drama" data-main-actors="Mark Wahlberg, Julianne Moore, Burt Reynolds, Luis Guzmán" data-director="Paul Thomas Anderson"> ...

jQuery Touch Optimized Sliders "R"Us Fire the plugin on a (set of) thumbnail(s) and it will create a lightbox popup with a slider for the enlarged images. <script type="text/javascript"> $(document).ready(function() { $("#example a").tosrus(); }); </script> Image gallery By default, the plugin will automatically create a gallery from the targeted anchors: $("#example a").tosrus(); Single images This lightbox has been set up to create a new popup for each anchor:

Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS Its handy and easy-to-use UI allows you to adjust rich graphical styles quickly and without coding. The main features: 2D and 3D transformsmultiple complex transitionsmultiple linear and radial gradientsmultiple box and text shadowscustom fonts (including google fonts)and much moreYou’ll be able to play with all EnjoyCSS parameters just like in photoshop or illustarator (with sliders, colorpickers and etc) combining all possible CSS3 style capabilities for the same element. Moreover you can include pseudo states (:hover, :active, :focus, :after, :before) and style them as well. All required CSS code will be automatically generated by EnjoyCSS. You can easily copy-pase all the code into your environment or get the code for each style aspect separately, e.g., code for each gradient, shadow or transform.