웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
kimdirector is Creative Web & Mobile UI/UX Planner and Designer
HOME WEBDESK Inspiration
Elements of a Brilliant jQuery Image Slider
Posted by kimdirector | 2014.10.31 | Hit : 7775
jQuery image slider 리소스 Example
웹사이트 제작시, 활용도가 가장 높은 image slider 에 대한 좋은 리소스 파일들을 소개합니다.
그 이유는 여러가지가 있겠지마 그 중에서 컨텐츠에 대한 정보 제공을 효율적으로 할 수 있는 장점이 되겠습니다.
모든 컨텐츠를 펼쳐서 늘어 놓고 보다는 같은 부류의 컨텐츠를 그룹으로 묶어서 보여주기 때문에 전체적인 화면을 간결하게고 심플하게 처리할 수 있기 때문입니다.
뿐만 아니라, 사용자에게 재미있는 요소를 제공하거나 흥미를 줄 수 있는 요소이기도 해서 image slider의 활용성은 매우 뛰어난 편입니다.
소개하고 있는 43가지의 image slider는 그런 면에서 상당히 좋은 리소스 파일들이라고 생각하고 디자이너에게, 또는 개발자에게 많은 도움이 될 것 같습니다.
원문에서는 image slider에 대한 다양하고 상세하게 설명을 하고 있지만, 영문인지라 비교적 간단하게 설명하고 있는 각각의 설명만을 해 드립니다. 자세한 정보는 해당 원문을 보시기 바랍니다.
몇가지 꼭지 중에서 Example에 해당하는 것만 추려서 공유해 드립니다.
1. SlideMe
Why it’s brilliant :
It is beautiful, powerful, and customizable.
It’s light-weight and easy to install.
It has many different kinds of transition effects, paginations and callbacks.
It has great support and a sense of humor! Just try reporting a bug :)
2. Nivo Slider
Why it’s brilliant :
Nivo can be easily customized and even has a Premium WordPress plugin with even more features.
It has a variety of beautiful transition effects ranging from slicing and sliding to fading and folding.
Small, Semantic and Responsive, it is only 15kb so it has a minimal impact on page load times.
With approximately 3 million [DOWNLOAD]s it is arguably the most popular slider plugin out there, so it is battle tested, bug free, and comes with excellent support and documentation.
3. Gamma Gallery
Why it’s brilliant :
It provides adjustable responsive images by taking its grid layout and the full slideshow view into account.
It uses Masonry in a fluid mode where column numbers are defined depending on the grid containers.
It’s beautiful, and well documented. You can find it on Github licensed under the MIT License.
4. Unslider
Why it’s brilliant :
Has keyboard support so users can cycle through photos with left and right arrow keys.
It’s been extensively tested and falls back very nicely to make it cross-browser compatible.
Responsive and touch support compatible for mobile devices.
Easy to use and customize right out of the box.
5. bxSlider
Why it’s brilliant :
Fully responsive with built-in touch support.
Slides can contain images, video, or HTML content, and also offers horizontal, vertical, and fade modes.
Easy to use with simple 3-step installation instructions.
Small file size allows for faster load times.
6. Slicebox Revised
Why it’s brilliant:
Has the “wow” factor. This slider takes the typical 2D slider visual a step further and presents images in a 3D effect for added depth and visual interest.
Customizable with multiple slider transition options.
Revised version includes separate containers for the image description for better SEO practices.
Licensed under the MIT License on Github.
Fully responsive
7. Juicy Slider
Why it’s brilliant :
Lightweight and fully responsive.
Automatically adjusts image size so it’s compatible with almost all browsers.
Open-sourced. Licensed under the MIT license.
Fully customizable with various effects, masks and other options.
8. jimpress.js
Why it’s brilliant:
3D transitions presents images and content in a soft, unique effect.
Offers multiple layout options to fit a variety of site design.
Fully responsive design.
Has on-site tutorial with easy-to-follow installation instructions.
9. Blueberry
Why it’s brilliant:
Fully responsive design.
Clean minimalist design allows for easy integration into your existing design.
Allows customization for various elements such as speed, hover function, etc.
Open source project released under GPL v3 license.
10. zAccordion
Why it’s brilliant:
Unique accordion “slide and pop” effect grabs viewers’ attention and makes this slider to stand out from the rest.
Tried and true code base has been thoroughly tested and updated to fit today’s technological needs.
Touch friendly, and responsive design renders properly in any desktop browser size and on mobile devices.
It has great support with rapid response times to inquiries.
11. Pikachoose
Why it’s brilliant:
It’s lightweight and easily to install and customize.
Has several nice design options to choose from.
Latest version includes API hooks for integrating lightboxes and other useful tools.
12. Galleria
Why it’s brilliant:
Free and open source. Released under the MIT license, so there are basically no restrictions on usage.
Fully responsive design with touch support.
Installs easily with a single line of code.
Includes web app that allows you to upload, preview, and publish high quality images quickly and easily.
All images are cloud hosted by Galleria.
13. Windy
Why it’s brilliant:
Unique fly away effect is eye-catching and beautiful.
Allows for displaying several images in one slider, many more than the typical jQuery plugin allows.
On-site tutorial provides easy-to-follow installation instructions.
Has multiple display options to choose from so as to fit horizontal and vertical image displays.
14. Parallax Slider
Why it’s brilliant:
Multiple visual layers gives your art framework added depth.
In-depth tutorial walks you through installation step by step.
Easily customizable. Has multiple backgrounds to choose from, and options for setting speed, animation, rotation effect, and more.
15. Rhino Slider
Why it’s brilliant:
Extremely flexible and customizable.
Large variety of styles and effects.
Can be controlled with keyboard arrow keys.
Can apply all effects to not only images, but HTML elements too.
16. Slippry
Why it’s brilliant:
Responsive and lightweight.
Modern code (HTML5 + CSS3) but still downgrades gracefully.
Beautifully simplistic yet customizable.
17. Camera Slideshow
Why it’s brilliant:
Clean and simple presentation of images and text.
Responsive with multiple transition effects.
Lots of options to customize anything you want.
18. jQuery Slider Shock
Why it’s brilliant:
Lots of features and fun transition effects to choose from.
Fully responsive, and mobile ready (premium).
Supports images and videos from YouTube playlists, RSS Feeds, Twitter Feeds, Flickr and Instagram images.
19. Slick
Why it’s brilliant:
Fully accessible with arrow key navigation.
Infinite looping and swipe enabled (or disabled if you prefer).
Fully responsive and scales with its container.
Has Autoplay, dots, arrows and callbacks.
20. Crafty Slide
Why it’s brilliant:
Extremely simple and lightweight (2kb) slideshow.
Options to set custom width, height, fadetime and delay.
You can select whether to display pagination or not.
21. Flux Slider
Why it’s brilliant:
Utilises the newer, more powerful CSS3 animations yet still compatible with both jQuery & Zepto.js and supports more than just WebKit browsers.
Code and docs available on Github for additional support.
15 cool 2D and 3D transitions out of the box.
22. Basic Slider
Why it’s brilliant:
Simple and lightweight so it can be easily customizable to suit your needs.
Code and docs available on Github for additional support.
Change to v1.3 offer responsive functionality.
23. Wow Slider
Why it’s brilliant:
Point-and-click editing for non-coders.
Drag-n-drop images for ease of use.
25 languages in the interface.
Add logo or watermark to slides to prevent image theft.
24. EGrappler Full Screen Responsive Slider
Why it’s brilliant:
Fully responsive and adjustable.
Offers full screen images.
25. Flex Slider
Why it’s brilliant:
Simple, semantic markup.
Horizontal/vertical slide and fade animations.
Multiple slider support and callback API.
Hardware accelerated touch swipe support.
26. jQuery Slider2
Why it’s brilliant:
Small, simple and lightweight yet very powerful.
Works on all main browsers.
Lots of customizable features like autoplay, wait times, randomize, etc.
27. jQuery Blinds
Why it’s brilliant:
Smooth animated transitions
Customizable animation orchestration
Compatible down to IE 6
28. AnythingSlider
Why it’s brilliant:
Slider panels can be any type of HTML content.
Multiple sliders allowable per-page.
Themes can be applied to individual sliders.
Responsive and lightweight.
Optional Video extension allows video to pause playing when not in view and resume when in view (if files are hosted on the web). This currently works for YouTube, Vimeo and HTML5 video.
29. BlogSlideShow
Why it’s brilliant:
Designed specifically for blogs.
Comes with several nice transition effects right out of the box.
Very lightweight and easy to use.
30. Sequence
Why it’s brilliant:
Moves multiple elements at the same time to create a very cool parallax effect.
Touch swiping and tapping supported to allow for navigation between frames.
Works on all modern browsers and is easily modifiable.
31. ThreeSixty Slider
Why it’s brilliant:
Great for e-commerce to help customers look at products in detail.
Lightweight and fully customizable with lots of options out of the box.
Supports all major browsers including IE 6.
32. Adaptor
Why it’s brilliant:
Lightweight with cool 3D rotation effects yet falls back gracefully to simple fade transitions on non-webkit browsers.
Excellent detailed documents and support on Github.
All 2D slide transitions have been tested in IE 6 and all other modern browsers.
33. Circular Content Carousel
Why it’s brilliant:
Beautifully simple design and very lightweight.
Images slide infinitely circular (hence the name).
Additional unique feature: Click on “more” to reveal another content area and move the respective item to the left.
34. Minimit Gallery
Why it’s brilliant:
A library agnostic javascript plugin, built for advanced frontend developers.
Helps you spend less time during set up, and more time coding the animations.
Very customizable and lightweight.
35. ResponsiveSlides.js
Why it’s brilliant:
Small file size, 1.4kb minified and gzipped.
Fully responsive.
Compatible with all major web browsers including IE6+
Customizable. Options include pagination, controls, slides, etc.
36. Sequence
Why it’s brilliant:
Unlike any other jQuery slider! Allows you to move, scale, rotate, and flip individual elements within the slider frame.
Responsive with touch support.
CSS3 transitions offer a smoother and more efficient user experience
Supported in all modern web browsers; plus includes a fallback theme for the more “historical” web browsers around.
Customizable with 40+ options available.
37. Fotorama
Why it’s brilliant:
Responsive with touch support.
Out of the box ready for use.
Easy to install by copying and pasting code snippet. Also offers plugins for WordPress and Ruby on Rails.
38. Hashslider
Why it’s brilliant:
Direct links to slider position via hashtags on window locations
Lightweight and easily to install
Supports large quantity of slides
Fully responsive and customizable
39. ayaSlider
Why it’s brilliant:
Very flexible! Can embed and/or animate any HTML element
Customizable. No predefined style sheet.
Responsive design
Licensed under the MIT license.
40. Awkward Showcase
Why it’s brilliant:
The kid with the glasses in that [DEMO]   photo is epic!
Supports more than just images. Can include captions, tooltips, video, and more.
Can also enable thumbnails, activate dynamic height and more.
41. jQuery Immersive Slider
Why it’s brilliant:
Sleek design! Background images transition along with viewing slide for a fully immersing user experience.
Easy to install. Just copy and paste code snippets.
Versatile use. Can include captions along with images.
42. Really Simple Slideshow
Why it’s brilliant:
Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images at a time.
Very customizable and lightweight.
Detailed set-up documentation and support.
43. Sudo Slider
Why it’s brilliant:
Can load any HTML content as well as AJAX content.
Supports IE6+
Fully responsive and lightweight.

Posted by kimdirector | 2014.10.31 | Hit : 7775
LINK http://www.vandelaydesign.com/jquery-image-galleries/
Tags jQuery image slider 리소스 Example
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=DesignInspiration&no=64


Webdesign Report
Web Plan Report
Web Development
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us   Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign Web Development Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site  ETC. Work  Artwork  Typography Work
디자인 이벤트 안드로이드 CIP 셔터스톡 머티리얼 디자인 디자인 심리학 인간 웹표준 기획서 프랜차이즈 아이폰 홈페이지 배경이미지 홈페이지 직장인 웹표준 Responsive 설득형 디자인 청중 백신 솔루션 온라인 이카다로그 한국도자재단 소셜미디어 무료 소스 웹디자이너 CIO 공짜 개발 디자이너 UX 비즈니스 Draft 구루 롤모델 스티브잡스 웹디자인
Recommend Tags
디자인 씽킹 퍼스널 브랜드 사용자 경험 서비스 디자인