안녕하세요, 블로그 독자 여러분. 오늘 나는 당신에게 유용한 선택을 제시합니다 무료 JQuery예시가 포함된 슬라이더. 여전히 리소스에 이미지 슬라이더를 추가하기로 결정했다면 이 선택이 매우 유용할 것이며 선택할 수 있는 것이 많습니다. 또한 모든 슬라이더에는 예제가 있으며 각 슬라이더를 실제로 사용해 볼 수 있습니다. 일반적으로 저는 여러분의 주의를 산만하게 하지 않을 것입니다. 선택하세요 :-)
간단한 jQuery 이미지 슬라이더사이트에서 가장 일반적이고 작은 축소판 슬라이더입니다.
JQuery의 썸네일 슬라이더거의 모든 디자인에 적합한 축소판 그림이 포함된 매우 간단하고 흥미로운 슬라이더입니다.
크고 아주 아름다운 슬라이더흥미로운 텍스트 반전이 포함된 이미지.
리소스에 대한 가장 일반적이고 간단한 슬라이더
지나칠 수 없는 화려한 슬라이더.
이미지와 아름다운 뒤집기 효과가 포함된 세련된 텍스트 슬라이더를 기다리세요.
지속적이고 부드럽게 스크롤되는 흥미로운 이미지 스크롤입니다. 기본적으로 다양한 과일 이미지가 있으며 이를 자신만의 이미지로 변경할 수 있습니다.
이미지를 확대하면 크기가 변경되는 커다란 분홍색 화살표가 있는 흥미로운 슬라이더입니다.
인터넷에서 다음을 위한 훌륭한 플러그인을 많이 찾을 수 있습니다. jQuery 생성캐러셀과 슬라이더. 추가 효과를 사용하여 동적 스크롤을 구현할 수 있습니다.
이는 지난 몇 년 동안 웹 디자인에서 가장 인기 있는 트렌드 중 하나입니다. 또한 기성 라이브러리와 jQuery 플러그인을 사용하면 시간을 크게 절약할 수 있습니다. 여러분이 해야 할 일은 JavaScript 및 CSS 파일에 대한 링크를 제공한 다음 원하는 HTML 요소에 효과를 적용하는 것뿐입니다.
자신만의 설정과 CSS 스타일을 설정할 수도 있습니다. 오늘의 기사는 당신을 소개하는 것을 목표로합니다 반응형 jQuery 플러그인캐러셀과 슬라이더를 만드는 데 사용됩니다.
Distractful – 터치 감지 전체 화면 콘텐츠 슬라이더를 생성하기 위한 jQuery 플러그인
지원되는 반응형 전체 화면 jQuery 콘텐츠 캐러셀 슬라이더 터치스크린. 플러그인은 아래에 배포됩니다. 라이센스 계약 GNU 일반 공중 라이선스 v3:
Neoslide: 간단하고 확장 가능한 jQuery 캐러셀 플러그인
모든 웹 페이지에서 완전히 사용자 정의 가능한 슬라이더를 사용할 수 있게 해주는 간단하고 확장 가능한 jQuery 플러그인:
Hslider: 플러그인 적응형 갤러리전체 페이지 너비 이미지
적응형을 사용하여 이미지를 표시하는 또 다른 플러그인 jQuery 캐러셀컨트롤 및 조정 가능한 지연 시간 포함:
Carousel 3D: 3D 회전 효과가 있는 jQuery 회전식 플러그인
매끄러운 슬라이더: 전체 화면 반응형 jQuery 캐러셀
다양한 탐색 유형(이미지 썸네일, 페이지 매기기 요소 또는 탭이 있는 SVG 화살표)으로 콘텐츠와 이미지를 표시하기 위한 작고 매력적인 jQuery 캐러셀:
PaW 캐러셀: jQuery로 구동되는 반응형 캐러셀
PaW Carousel(v2)은 이미지 썸네일이 포함된 반응형의 간단한 jQuery 캐러셀을 생성하기 위한 소형 플러그인입니다.
Carousel Sharer: 소셜 네트워크에 다시 게시하기 위한 jQuery 회전판
Carousel Sharer는 여러 제품을 연속으로 표시하고 방문자가 Facebook, Twitter, Google+ 및 Pinterest에서 제품을 공유할 수 있게 해주는 jQuery 플러그인입니다.
Simply Carousel: 미니멀한 반응형 이미지 캐러셀
Simply Carousel은 유연하고 반응성이 뛰어난 이미지 슬라이더와 캐러셀을 만들 수 있는 작고 빠른 jQuery 플러그인입니다.
슬라이드: 터치를 지원하는 반응형 jQuery 캐러셀 및 슬라이드쇼
Slides는 축소판, 화살표 탐색 및 사용자 정의 컨트롤을 사용하는 기능을 갖춘 jQuery 웹사이트용 반응형 캐러셀을 만들기 위한 소형 jQuery 플러그인입니다. 터치 스크린 지원이 구현되었습니다.
jQuery 콘텐츠 캐러셀
자동 재생 기능, 컨트롤 및 콜백 기능을 갖춘 간단한 반응형 jQuery 캐러셀:
Slick: 반응성이 뛰어나고 유연한 jQuery 캐러셀
Slick은 맞춤형, 반응형, 최적화된 콘텐츠를 만들기 위한 "신선한" 플러그인입니다. 모바일 장치모든 HTML 요소와 작동할 수 있는 jQuery 캐러셀 및 슬라이더:
bxSlider: jQuery HTML 콘텐츠 슬라이더
bxSlider는 현재 사용 가능한 최고의 jQuery 콘텐츠 슬라이더 중 하나입니다. 이 플러그인은 슬라이드쇼 구성에 적합합니다.
CarouFredSel: 유연하고 강력한 jQuery 캐러셀 플러그인
jQuery.carouFredSel은 HTML 요소를 콘텐츠 캐러셀로 바꾸는 플러그인입니다. 하나 이상의 요소를 수평 및 수직으로 동시에 스크롤할 수 있습니다. 활성화할 수도 있습니다. 자동 재생스크롤을 무한하게 만듭니다.
jQuery를 사용한 순환 콘텐츠 캐러셀
클릭할 때마다 공개되는 캐러셀 새 블록콘텐츠. 십자가를 클릭하면 활성 블록이 닫히고 축소판 보기 시작 위치로 돌아갑니다.
Cloud Carousel: 자바스크립트의 3D 회전목마
이 캐러셀을 사용하면 현실적인 관점을 만들 수 있습니다. 많은 jQuery 3D 캐러셀은 위치가 아닌 이미지 크기에만 원근 효과를 적용하므로 페이지 요소의 불균형이 발생합니다.
Elastislide: jQuery를 사용한 반응형 캐러셀
엘라스티슬라이드는 반응형 jQuery 캐러셀, 모든 크기의 화면에 적용됩니다. 유연한 너비를 가진 컨테이너에 캐러셀을 삽입하면 캐러셀 자체가 "고무"가 됩니다.
jCarousel Lite
이 플러그인을 사용하면 이미지나 HTML 요소를 슬라이더로 볼 수 있습니다. 무게는 2Kb에 불과하지만 동시에 자신만의 설정을 사용할 수 있습니다.
3D 회전목마
커서 위치에 반응하는 그림자 효과와 애니메이션을 사용하여 이미지에서 3D jQuery 캐러셀을 만듭니다.
JQuery 캐러셀 플러그인
이 플러그인의 설정을 사용하면 캐러셀에 표시할 요소 수를 결정할 수 있으며, 그 후 플러그인은 이를 원하는 너비에 맞게 조정합니다.
jQuery를 사용하여 이미지 슬라이더 회전
작은 추가 기능이 있는 비대칭 이미지 슬라이더: 이미지를 스크롤하면 이미지가 약간 회전합니다. 요소의 약간의 변위로 인해 슬라이더는 특이한 모양을 취합니다.
jQuery 기능 캐러셀
이 플러그인은 추천 기사를 표시하도록 설계되었습니다. 홈페이지이지만 다른 콘텐츠에도 사용할 수 있습니다. jQuery 콘텐츠 캐러셀의 나머지 부분은 숨겨지는 동안 최대 3개의 이미지를 동시에 표시할 수 있습니다.
jQuery 무한 캐러셀
캐러셀에 이미지와 비디오를 무제한으로 표시할 수 있는 jQuery 플러그인입니다. 다른 캐러셀과 달리 Infinite Carousel은 탐색을 사용할 필요 없이 무한 루프로 요소를 표시합니다.
jQuery Liquid Carousel 플러그인
Liquid Carousel은 유동적인 디자인을 생성하도록 설계된 플러그인입니다. jQuery 반응형 캐러셀 컨테이너의 크기가 변경될 때마다 표시되는 요소 수가 새 너비에 맞게 조정됩니다.
Jquery MS 캐러셀
2019년 11월 4일 게시물이 업데이트되었습니다.
유리 네메츠
슬라이더 켜기 순수 CSS+ 보너스 슬라이더CSS 슬라이더는 Javascript 슬라이더에 비해 몇 가지 장점이 있습니다. 이러한 이점 중 하나는 로딩 속도입니다. 슬라이더용 이미지는 큰 크기로 사용될 뿐만 아니라(최적화되지 않은 경우) 다른 화면), 스크립트를 로드하는 데도 시간이 걸립니다. 하지만 이 기사에서는 순수한 CSS를 사용하는 슬라이더만 볼 수 있습니다.
슬라이더에 관해 웹사이트에서 찾은 내용은 다음과 같습니다.
1. CSS3 이미지 슬라이더라디오 버튼을 사용하여 슬라이드를 탐색하는 CSS 슬라이더입니다. 이 라디오 버튼은 슬라이더 아래에 있습니다. 또한 라디오 버튼 외에도 왼쪽과 오른쪽의 화살표를 사용하여 탐색이 수행됩니다. 현재 표시되는 이미지를 추적하기 위해 :checked 의사 클래스가 사용됩니다.
2. 축소판이 포함된 CSS3 이미지 슬라이더이전 CSS 슬라이더와 달리 여기에는 하단의 라디오 버튼 대신 모든 이미지의 썸네일이 있어 이미지 갤러리를 만들 때에도 편리합니다. 이미지는 독특한 효과로 변합니다. 확대하면 부드럽게 사라집니다.
3. CSS를 사용한 갤러리하지만 이 CSS 슬라이더는 판매 페이지에 적합합니다. 일반적으로 랜딩 페이지(판매 페이지)를 개발할 때 많은 웹 개발자는 슬라이더를 맨 처음에 배치하여 첫 번째 화면(스크롤 없이)에서 방문자가 이 페이지에서 사용할 수 있는 모든 이점을 즉시 볼 수 있도록 합니다. 모든 것 외에도 이 슬라이더는 적응력이 뛰어나다는 점도 좋습니다.
4. 링크가 없는 CSS 슬라이더이 슬라이더는 링크를 사용하지 않는다는 점을 바로 알려드리고 싶습니다! 기본적으로 기본 이미지(슬라이드) 외에 2개의 슬라이드가 더 표시됩니다. 그들은 메인 뒤에 있습니다. 슬라이드 변경은 아름다운 모드에서 이루어집니다. 먼저 두 개의 슬라이드가 서로 떨어져 이동되고 이후 기본 슬라이드가 될 슬라이드가 중앙에 배치됩니다. 그런 다음 슬라이드가 확대되어 다른 슬라이드 앞에 배치됩니다.
5. 반응형 CSS3 슬라이더또 다른 적응형 슬라이더는 라디오 버튼을 기반으로 제어됩니다. 이 슬라이더가 어떻게 보이는지 보려면 다른 장치아 - 브라우저 창을 직접 변경하거나 슬라이더가 있는 페이지에 다양한 장치에 대한 특수 아이콘이 있습니다. 클릭하면 컴퓨터, 태블릿 또는 스마트폰에서 슬라이더가 어떻게 보이는지 확인할 수 있습니다.
***보너스 슬라이더***위에 제시된 모든 슬라이더 외에도 하나 더 만족시켜 드리고 싶습니다. 이 슬라이더는 이미지 갤러리를 만드는 데 적합합니다. 그가 하는 일은 말로 설명할 수 없으므로 영상에서 모든 내용을 시청하는 것이 좋습니다.
결론슬라이더를 사용하면 이미지 갤러리를 아름답게 디자인하고 더 컴팩트하게 배치할 수 있으며 판매 페이지의 첫 번째 화면(스크롤 없이 표시되는 페이지 부분)에 슬라이더를 삽입하여 방문자가 받게 될 주요 혜택을 즉시 보여줄 수 있습니다. . 슬라이더를 사용할 수 있는 위치와 방법은 여전히 많이 있지만 한 가지는 분명합니다. 올바르게 사용하면 유용하다는 것입니다.
기사에서 논의된 사항입니다.
슬라이더프로 - 반응형 jQuery자체 API를 포함하여 썸네일 및 기타 설정을 지원하는 슬라이더입니다.
- 슬라이더는 기본적으로 화면 크기에 맞게 조정됩니다. 이미지의 크기뿐만 아니라 추가 콘텐츠가 포함된 레이어도 크기가 조정됩니다.
- 터치 스크린에 대한 터치 스와이프 이벤트를 지원합니다. CSS 미디어 쿼리와 유사한 중단점을 사용하여 다양한 화면 크기에서 슬라이더 설정을 변경합니다.
- CSS3 전환, 레이어 애니메이션, 슬라이드 변경을 위한 페이드 효과를 사용한 부드러운 애니메이션.
- 슬라이더는 페이지의 전체 너비, 전체 화면 또는 컨테이너 내부에 위치할 수 있습니다.
- 슬라이드 높이를 자동으로 변경합니다. 미리보기 방향은 수직 또는 수평일 수 있습니다.
- 지연 로딩, Retina 및 특정 화면 크기에 대해 다양한 이미지를 로드하는 기능이 이미지에 지원됩니다.
- 비디오 지원, 라이트박스 통합, 화살표, 점, 키보드, 썸네일 등을 사용한 탐색.
스타일 파일을 포함합니다.
HTML
슬라이더 삽입을 위한 마크업 예:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit ametconsectetur adipisicing 엘리트
JS필요한 스크립트를 연결합니다.
플러그인을 초기화합니다.
jQuery(document).ready(function($) ( $("#my-slider").sliderPro(); ));
슬라이더와 그 사용법에 대한 자세한 내용은 Github에서 확인할 수 있습니다. 아래 링크.
