웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Design Inspiration
HOME WEBDESK Design Inspiration
Elements of a Brilliant jQuery Image Slider
Posted by kimdirector | 2014.10.31 | Hit : 4352
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.
Lightweight.
 
 
 
 
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 : 4352
LINK http://www.vandelaydesign.com/jquery-image-galleries/
TAG jQuery image slider 리소스 Example
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=DesignInspiration&no=64

COMMENT
목록보기 이전보기

WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
로고디자인 스마트워크 다운로드 image 디자인 HTML5 CSS IT 3D Model 클라이언트 아이폰 전략 UI 디자이너 전략 웹디자이너 jQuery 무료이미지 브라우저 테더링 홈페이지 노트북 웹디자인 트위터 마이 홈페이지 플래시 원칙 모바일 로고 User Experience Design 스튜디오 기업 웹 사이트 브랜드 데이터 코딩 디자인 파트너 디자인 정글 쿠폰 디자인 컨텍스트 문장