Carousel은 무엇인가?
Carousel는 현대 웹 디자인에서 가장 인기 있는 UI 부품 중 하나이다. Carousel는 당신이 좋아하는 이미지, 제품, 블로그 게시물 또는 다른 모든 콘텐츠를 무한 회전 인터페이스로 보여줄 수 있게 해준다.
Carousel와 Slider의 차이점은?
일반적으로 회전목마는 내비게이션 컨트롤을 클릭/테이핑하거나 화면(모바일)을 돌려 회전목마 아이템을 무한 루프할 수 있다. 마지막 항목에 도달하여 계속 탐색하면 회전목마가 자동으로 첫 번째 항목으로 되돌아간다는 것을 의미한다. 그리고 슬라이더는 보통 마지막 슬라이드에 도달하면 작동을 멈춘다.
해당 내용에는 는 jQuery, Banilla JavaScript 또는 순수 CSS/CSS3에서 구현된 최고, 응답성 및 사용이 간편한 Carouzel 플러그인이 10개 게시 되어 있다.
01. 완벽한 응답성과 유연한 jQuery Carouzel 플러그인
www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/
jQuery Slick Demos
Single Item 1 2 3 4 5 6 $('.single-item').slick(); Multiple Items 1 2 3 4 5 6 7 8 9 $('.multiple-items').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 3 }); Responsive Display 1 2 3 4 5 6 7 8 $('.responsive').slick({ dots: true, infinite: false
www.jqueryscript.net
02. 반응성이 뛰어나고 유연한 모바일 터치 슬라이더 - Swiper
(Responsive and Flexible Mobile Touch Slider - Swiper)
www.jqueryscript.net/demo/Responsive-Flexible-Mobile-Touch-Slider-Swiper/swiper-demos/
Swiper Demos
Tab 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
www.jqueryscript.net
03. 응답성 및 유연한 컨텐츠 슬라이더 플러그인 - 깜박임
(Responsive & Flexible Content Slider Plugin - flickity)
www.jqueryscript.net/demo/Responsive-Flexible-Content-Slider-Plugin-flickity/
jQuery flickity Plugin Demo
www.jqueryscript.net
04. 블루림프 갤러리(Blueimp Gallery)
www.jqueryscript.net/demo/Powerful-jQuery-Responsive-Image-Gallery-Plugin-Blueimp-Gallery/
blueimp Gallery
blueimp Gallery blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slidesho
www.jqueryscript.net
05. jQurty HTML Content Carousel Plugin - jcarousel
www.jqueryscript.net/demo/jQuery-HTML-Content-Carousel-Plugin-jcarousel/examples/simple/
Simple Carousels - jCarousel Examples
www.jqueryscript.net
06. 응답성 다기능 jQuery Slider 플러그인
Responsive & Multi-Functional jQuery Slider Plugin
www.jqueryscript.net/demo/Responsive-Multi-Functional-jQuery-Slider-Plugin-slider-js/
UI Definition Demo 1 - Jssor Slider, Slideshow with Javascript Source Code
Do you know there are 360+ slideshow transitions? FADE ZMF|10
www.jqueryscript.net
07. jQuery 및 CSS3가 포함된 경량 응답형 컨텐츠 슬라이더 플러그인 - 라이트슬라이더
Lightweight Responsive Content Slider Plugin with jQuery and CSS3 - lightslider
www.jqueryscript.net/demo/Lightweight-Responsive-Content-Slider-Plugin-with-jQuery-CSS3-lightslider/
jQuery lightslider Plugin Demos
Fourth Slide Lorem ipsum Id sit labore consectetur in incididunt sit ut mollit cupidatat sint anim reprehenderit labore laboris sed laboris sed elit consequat ea ad veniam in mollit eu sunt reprehenderit amet eu officia nisi minim esse sunt ut aliqua venia
www.jqueryscript.net
08. 응답성 캐러셀 슬라이드쇼(jQuery 포함)
Responsive Carousel Slideshow with jQuery
www.jqueryscript.net/demo/Responsive-Carousel-Slideshow-with-jQuery/test/functional/
Responsive Carousel Demo Page
www.jqueryscript.net
09. 깨끗하고 반응성이 뛰어난 jQuery Carouzel 플러그인 - flexisel
Clean and Responsive jQuery Carousel Plugin - flexisel
www.jqueryscript.net/demo/Clean-Responsive-jQuery-Carousel-Plugin-flexisel/
jQuery Flexisel Plugin Examples
www.jqueryscript.net
10. Carouzel & Marquee like List 스크롤 jQuery용 Plguin - 스크롤 박스
Carousel & Marquee Like List Scrolling Plguin For jQuery - Scrollbox
www.jqueryscript.net/demo/Carousel-Marquee-Like-List-Scrolling-Plguin-For-jQuery-Scrollbox/demos/
jQuery Scrollbox Plugin Examples
www.jqueryscript.net
출처 : www.jqueryscript.net/blog/best-carousel.html
#마치며
퍼블리싱 작업시 슬라이드 종류는 정말 다양하고 광범위하게 사용된다. 때문에 본인처럼 직접 짜는 정도의 수준이 아닌 이상 구글링으로 배포된 소스를 활용하는 분들이 많을 것이다. 나 역시 주로 사용하는 소스를 별도로 다운받아서 보관하고 있으며 이와 같이 다양한 플러그인 슬라이드 & 스와이프 등 알고 있다면 굉장히 큰 도움이 된다.
본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :)
"당신의 하루가 별보다 빛나길"
'WEB·MOBILE- HTML > Java&jQuery' 카테고리의 다른 글
| 마우스 이벤트 목록별 정의 - jQuery 및 javascript(Mouse event) (0) | 2020.09.29 |
|---|---|
| JQuery Lightbox 플러그인 및 소스 시리즈별 모음! (0) | 2020.04.02 |
| javascript 마우스 우클릭 방지! 개발자 도구 보기 방지, 소스보기, F12보기 방지를 위한 스크립트 정리 (0) | 2020.01.28 |