HTML5 반응 형 슬라이더. CSS3에서 반응 형 슬라이더를 만드는 방법은 무엇입니까? 반응 형 jQuery 플러그인 인 SlidesJS

자유의 집결 HTML 및 CSS 슬라이더 코드 예 : 카드, 비교, 전체 화면, 반응 형, 단순등 2018 년 6 월 컬렉션 업데이트. 7 개의 새로운 아이템.

코드 정보

HTML / CSS / JS의 온 보딩 화면 세트. PNG 아이콘, CSS3 전환 및 플렉스 박스를 레이어링하는 개인 실험입니다.

HTML, CSS 및 JavaScript 정보 카드 슬라이더.
Andy Tran 제작
2015 년 11 월 23 일

데스크톱 및 모바일 브라우저에서 작동하는 사진 슬라이더.
타론 제작
2014 년 9 월 29 일

비교 (전 / 후) 슬라이더

코드 정보

CSS 및 jQuery로 만든 간단하고 깨끗한 이미지 비교 슬라이더, 완벽하게 반응하고 터치가 가능합니다.

코드 정보

html과 css 만있는 전후 슬라이더.

코드 정보

이미지 슬라이더 전후의 두 레이어를 사용하여 새로운 아이디어를 가지고 놀아보십시오. 최소한으로 유지합니다. 바닐라 유지. "유용한 경우 좋아 :)

Vanilla JS, 최소한의,보기에 좋습니다.
Huw 제작
2017 년 7 월 3 일

코드 정보

JavaScript가있는 "분할 화면"슬라이더 요소입니다.

SVG 내부의 전후 슬라이더에 대한 약간의 실험. 마스킹은 매우 간단합니다. 모두 SVG이기 때문에 이미지와 캡션이 잘 어울립니다. 슬라이더 컨트롤에는 GreenSock의 Draggable 및 ThrowProps 플러그인이 사용되었습니다.
Craig Roblewsky 제작
2017 년 4 월 17 일

슬라이더에 사용자 지정 범위 입력을 사용합니다.
Dudley Storey 제작
2016 년 10 월 14 일

HTML, CSS 및 JavaScript가있는 반응 형 이미지 비교 슬라이더.
제작 : Ege Görgülü
2016 년 8 월 3 일

HTML5, CSS3 및 JavaScript 비디오 전후 비교 슬라이더.
Dudley Storey 제작
2016 년 4 월 24 일

CSS3 및 jQuery로 구동되는 2 개의 이미지를 빠르게 비교할 수있는 편리한 드래그 가능한 슬라이더입니다.
CodyHouse 제작
2014 년 9 월 15 일

전체 화면 슬라이더

코드 정보

라디오 입력을 기반으로 한 간단한 슬라이더. 100 % 순수 HTML + CSS. 화살표 키와 함께 작동합니다.

응답 : 예

종속성 :-

코드 정보

전체 화면 슬라이더에 대한 멋진 전환 효과.

코드 정보

Swiper.js가있는 수평 시차 슬라이딩 슬라이더.

코드 정보

마우스 이동시 반응 형 부드러운 3D 원근 슬라이더.

HTML, CSS 및 JavaScript가 포함 된 전체 화면 히어로 이미지 슬라이더 (스 와이프 패널 테마).
제작 : Tobias Bogliolo
2017 년 6 월 25 일

애니메이션을 향상시키기 위해 속도 및 속도 효과 (UI 팩)를 사용하는 슬라이더 상호 작용. 애니메이션은 화살표 키, 탐색 클릭 또는 스크롤 잭을 통해 트리거됩니다. 이 버전에는 상호 작용의 일부로 테두리가 포함되어 있습니다.
Stephen Scaff 제작
2017 년 5 월 11 일

이미지를 돋보이게하는 미니멀 한 스타일의 간단한 슬라이더. 이미지의 일부가 각 슬라이드에 나타납니다.
Nathan Taylor 제작
2017 년 1 월 22 일

것은 사용자 정의가 매우 쉽습니다. 글꼴, 글꼴 크기, 글꼴 색상, 애니메이션 속도를 안전하게 변경할 수 있습니다. JS 배열에있는 새 문자열의 첫 글자가 새 슬라이드에 나타납니다. 손쉬운 새 슬라이드 생성 (또는 삭제) : 1. JS의 배열에 새 도시를 추가합니다. 2. 슬라이드 개수 변수를 변경하고 CSS의 scss 목록에 새 이미지를 넣습니다.
Ruslan Pivovarov 제작
2016 년 10 월 8 일

이미지 마스킹 사각형 테두리의 클립 경로 (웹킷에만 해당).
이 마스크의 블렌드 모드.
스마트 색상 시스템, 색상 이름과 값을 sass 맵에 입력 한 다음이 색상 이름이있는 적절한 클래스를 요소에 추가하면 모든 것이 작동합니다!
멋진 크레딧 사이드 메뉴 (데모 중앙의 작은 버튼 클릭).
바닐라 js< 200 lines of code (basically it’s just adds/removes classes).

Nikolay Talanov 제작
2016 년 10 월 7 일

순수 JS 및 CSS (라이브러리 제외)를 기반으로 스크롤하는이 기울어 진 슬라이더입니다.
Victor Belozyorov 제작
2016 년 9 월 3 일

포켓몬 디자인의 슬라이더 애니메이션.
Pham Mikun 제작
2016 년 8 월 18 일

복잡한 애니메이션과 각진 텍스트가있는 HTML, CSS 및 JavaScritp 슬라이더.
Ruslan Pivovarov 제작
2016 년 7 월 13 일

HTML, CSS 및 JavaScript를 사용한 슬라이더 시차 효과.
Manuel Madeira 제작
2016 년 6 월 28 일

파급 효과가있는 HTML, CSS 및 JavaScript 슬라이더.
Pedro Castro 제작
2016 년 5 월 21 일

HTML, CSS 및 JavaScript가있는 클립 경로 표시 슬라이더.
Nikolay Talanov 제작
2016 년 5 월 16 일

이전 / 다음 슬라이드 미리보기가있는 GSAP + 매끄러운 슬라이더.
Karlo Videk 제작
2016 년 4 월 27 일

HTML, CSS 및 JavaScript 전체 페이지 슬라이더.
Joseph Martucci 제작
2016 년 2 월 28 일

HTML, CSS 및 JavaScript가 포함 된 전체 슬라이더 프로토 타입.
Gluber Sampaio 제작
2016 년 1 월 6 일

Greensocks TweenLite / Tweenmax로 애니메이션 된 전체 화면, 일종의 반응 형 슬라이드 쇼.
Arden 제작
2015 년 12 월 12 일

Arden 제작
2015 년 12 월 5 일

HTML, CSS 및 JavaScript를 사용하는 전체 화면 슬라이더 (GSAP 타임 라인) # 1.
Diaco M. Lotfollahi 제작
2015 년 11 월 23 일

사용자 정의 효과가있는 HTML 및 CSS 슬라이더.
Nikolay Talanov 제작
2015 년 11 월 12 일

HTML, CSS 및 JavaScript를 사용하는 시차가있는 전체 화면 드래그 슬라이더.
Nikolay Talanov 제작
2015 년 11 월 12 일

개념 증명 회전 슬라이더. 클립 경로와 많은 수학을 사용합니다.
타일러 존슨 제작
2015 년 4 월 16 일

translateX 및 translate3d 부드러움을 사용하는 간단한 전체 화면 CSS 및 jQuery 슬라이더!
Joseph 제작
2014 년 8 월 19 일

반응 형 슬라이더

코드 정보

이미지 불투명도 슬라이더

HTML 및 CSS의 이미지 불투명도 슬라이더.

호환되는 브라우저 : Chrome, Edge, Firefox, Opera, Safari

응답 : 예

종속성 :-

코드 정보

스택 형 유연한 슬라이드 레이아웃

이 예제는 서로 겹쳐진 슬라이드의 레이아웃을 만드는 방법을 보여줍니다 (특히 페이드 인 / 아웃 전환에 유용함). 높이를 설정하지 않고 위치를 피하지 않고 "절대적"이므로 완전히 유연하고 정상적인 페이지 흐름을 유지하기 쉽습니다.

호환되는 브라우저 : Chrome, Edge, Firefox, Opera, Safari

응답 : 예

종속성 :-

코드 정보

반응 형 슬라이더

HTML, CSS 및 JavaScript의 애니메이션 반응 형 슬라이더.

호환되는 브라우저 : Chrome, Edge, Firefox, Opera, Safari

응답 : 예

종속성 : animate.css

코드 정보

마스크 된 텍스트가있는 슬라이더

마스크 된 텍스트가있는 CSS 전용 슬라이더.

호환되는 브라우저 : Chrome, Edge (일부), Firefox, Opera, Safari

응답 : 예

종속성 :-

코드 정보

시차 효과가있는 이미지 및 콘텐츠.

코드 정보

CSS 전용 슬라이드 갤러리.

호환되는 브라우저 : Chrome, Edge, Firefox, Opera, Safari

응답 : 예

종속성 :-

코드 정보

순수 HTML / CSS 슬라이더

원형 SVG 진행률 표시 줄이있는 순수 HTML / CSS 슬라이더.

호환 가능한 브라우저 : Chrome, Edge (일부), Firefox (일부), Opera, Safari

응답 : 예

종속성 : font-awesome.css

코드 정보

CSS 만 사용하고 이미지의 가로 세로 비율을 유지하면서 썸네일로 완벽하게 반응하는 세로 슬라이더를 만드는 실험입니다.

코드 정보

바닐라 자바 \u200b\u200b스크립트로 만든 간단한 Flexbox 이미지 슬라이더 / 캐 러셀입니다.

코드 정보

이것은 슬라이드가 전환 될 때마다 모션 블러 효과를 시뮬레이션하는 실험입니다. SVG Gaussian Blur 필터와 일부 CSS 키 프레임 애니메이션을 활용합니다. 효과가 제대로 작동하는 데 Javascript가 필요하지는 않지만이 예제에서는 Javascript가 슬라이더 기능에만 사용됩니다.

코드 정보

JS로 멋진 애니메이션 슬라이더.

코드 정보

이것은 SVG 패턴이 CSS 전용 이미지 슬라이더를 위해 마스크와 같은 이미지를 만드는 데 어떻게 도움이되는지에 대한 실험입니다.

슬라이더 전환을 탐색 중입니다. 시차 옵션이 활성화 된 스 와이퍼 슬라이더. 대부분 여기에서 CSS 필터를 사용합니다.
Mirko Zorić 제작
2017 년 6 월 12 일

미묘한 트윈 애니메이션이있는 간단한 GSAP 슬라이더.
Goran Vrban 제작
2017 년 6 월 9 일

HTML, CSS 및 JavaScript를 사용한 슬라이더 UI.
Mergim Ujkani 제작
2017 년 6 월 6 일

슬라이더 GSAP virsion 2.
그들에 의해 만들어진
2017 년 5 월 4 일

간단한 클래스 추가 거래를 사용하는 약간의 슬라이스 전환 슬라이더. 타이밍을 약간 조정하고 모바일에 가장 적합한 접근 방식을 결정해야합니다 (단지 스택, 터치 이벤트 추가, 이미지 전체 뷰포트 만들기 등). 스크롤 휠 (스크롤 재킹), 탐색 버튼 및 화살표 키를 지원합니다. 콘텐츠 래퍼를 늘릴 수도 있습니다. 애니메이션이 적용되지 않은 상태에서 이미지가 뷰포트를 채우도록 만드는 것도 좋습니다.
Stephen Scaff 제작
2017 년 1 월 3 일

슬라이더 애니메이션 효과를 만들기 위해 CSS 테두리 이미지 및 클립 경로를 활용했습니다.
에밀리 헤이먼 제작
2016 년 12 월 31 일

Flexbox로 제작 된 작은 슬라이더. 약간 반응하며 슬라이더 영역과 함께 고정 된 요소를 가질 수 있습니다.
로버트 제작
2016 년 11 월 28 일

HTML, CSS 캔버스 슬라이더.
Nvagelis 제작
2016 년 10 월 29 일

HTML, CSS 및 JavaScript 3D 부드러운 슬라이더.
에두아르도 알레 그리니 제작
2016 년 10 월 19 일

스프링 클이있는 HTML 및 CSS 컵 케이크 슬라이더!
Jamie Coulter 제작
2016 년 10 월 14 일

Mario S Maselli 제작
2016 년 10 월 12 일

HTML, CSS 및 JavaScript로 UI 애니메이션 # 2 탐색.
Mario S Maselli 제작
2016 년 9 월 22 일

HTML, CSS 및 JavaScript로 UI 애니메이션 탐색 # 3.
Mario S Maselli 제작
2016 년 9 월 22 일

HTML, CSS 및 JavaScript가 포함 된 전자 상거래 슬라이더 v2.0.
Pedro Castro 제작
2016 년 9 월 17 일

곡선 배경의 HTML, CSS 및 JavaScript 깔끔한 슬라이더.
Ruslan Pivovarov 제작
2016 년 9 월 13 일

HTML, CSS 및 JavaScript로 UI 애니메이션 # 1 탐색.
Mario S Maselli 제작
2016 년 9 월 8 일

CSS의 힘을 즐기십시오 : 각 중간 이미지 위아래와 라이트 박스가있는 페이지가 매겨진 슬라이더.
Kseso 제작
2016 년 8 월 15 일

이중 노출은 2 개의 서로 다른 이미지를 단일 이미지로 결합하는 사진 기법입니다.
나카노 미사키 제작
2016 년 8 월 3 일

CSS3 속성 클립을 사용하는 슬라이더.
Pedro Castro 제작
2016 년 5 월 1 일

반응 형 CSS 슬라이더.
Geekwen 제작
2016 년 4 월 19 일

이것은 직접 번역 할 수없는 아름다운 의미의 단어를 보여주는 간단한 슬라이더 실험입니다. 초점 : 우아한 타이포그래피와 단순하면서도 매혹적인 전환.
Joe Harry 제작
2016 년 4 월 5 일

애니메이션 아이디어는 CSS 클립 경로의 값을 변경하여 마스킹 효과를 만드는 것입니다.
Bhakti Al Akbar 제작
2016 년 3 월 31 일

HTML, CSS 및 JavaScript가있는 도트 슬라이더.
Derek Nguyen 제작
2016 년 3 월 16 일

HTML, CSS 및 JavaScript가있는 프리즘 효과 슬라이더.
빅터 제작
2016 년 3 월 12 일

HTML, CSS 및 JavaScript가있는 슬라이딩 배경 갤러리.
Ron Gierlach 제작
2015 년 11 월 30 일

HTML, CSS 및 JavaScript 슬라이더 솔루션.
Jürgen Genser 제작
2015 년 9 월 30 일

Sequence.js에서 제공하는 제품 슬라이더입니다. Sequence.js-고유 한 슬라이더, 프레젠테이션, 배너 및 기타 단계 기반 애플리케이션을 만들기위한 반응 형 CSS 애니메이션 프레임 워크입니다.
Ian Lunn 제작
2015 년 9 월 15 일

작은 원형 맞춤형 슬라이더.
Bram de Haan 제작
2015 년 8 월 11 일

HTML, CSS 및 JavaScript가 포함 된 반응 형 GTA V 슬라이더.
Eduard Mayer 제작
2014 년 1 월 24 일

슬라이더와 비슷하지만 알 수없는 이유로 큐브 모양으로 회전합니다.
Eric Brewer 제작
2013 년 12 월 4 일

Hugo DarbyBrown 제작
2013 년 8 월 28 일

간단한 슬라이더

HTML, CSS 및 바닐라 자바 \u200b\u200b스크립트가 포함 된 이미지 오버레이 슬라이더.
유감 제작
2017 년 6 월 7 일

HTML 및 CSS 기능 이미지 슬라이더.
Joshua Hibbert 제작
2016 년 6 월 16 일

다축 이미지 슬라이더

HTML, CSS 및 JavaScript가 포함 된 다축 이미지 슬라이더.
Burak Can 제작
2013 년 7 월 22 일

큐브 슬라이더, HTML5 / CSS3 3d 변환을 사용한 작은 실험입니다.
Ilya K. 제작
2013 년 6 월 26 일

이 튜토리얼에서는 멋진 CSS3 슬라이더를 만들 것입니다. 슬라이드 사이에 페이드 효과를 사용합니다. 또한 각 이미지에 대한 설명을 사용할 수 있습니다. 정렬되지 않은 목록은 정보를 구성하는 데 사용됩니다. 슬라이드는 CSS3 애니메이션을 사용하여 자동으로 전환됩니다.

HTML 마크 업

HTML 마크 업은 매우 간단합니다. 예제에는 4 개의 슬라이드가 있습니다. 각각은 div 요소의 이미지 (배경)와 설명 텍스트로 구성됩니다. 추가 슬라이드를 삽입하는 것은 매우 쉽습니다.

설명 # 1
설명 # 2
설명 # 3
설명 # 4

CSS

슬라이더는 CSS3 anim_slides 및 anim_titles 애니메이션을 사용합니다. 첫 번째는 개별 슬라이드에 사용되고 두 번째는 설명 텍스트에 사용됩니다. 설명의 위치와 불투명도도 변경됩니다.

/ * Slider * / .slides (높이 : 300px; margin : 50px auto; overflow : hidden; position : relative; width : 900px;) .slides ul (list-style : none; position : relative;) / * Animation frames # anim_slides * / @ -webkit-keyframes anim_slides (0 % (불투명도 : 0;) 6 % (불투명도 : 1;) 24 % (불투명도 : 1;) 30 % (불투명도 : 0;) 100 % (불투명도 : 0;) ) @ -moz-keyframes anim_slides (0 % (불투명도 : 0;) 6 % (불투명도 : 1;) 24 % (불투명도 : 1;) 30 % (불투명도 : 0;) 100 % (불투명도 : 0;)). 슬라이드 ul li (불투명도 : 0; 위치 : 절대; 상단 : 0; / * css3 애니메이션 * / -webkit-animation-name : anim_slides; -webkit-animation-duration : 24.0s; -webkit-animation-timing-function : linear; -webkit-animation-iteration-count : 무한; -webkit-animation-direction : normal; -webkit-animation-delay : 0; -webkit-animation-play-state : running; -webkit-animation-fill-mode : 앞으로; -moz-animation-name : anim_slides; -moz-animation-duration : 24.0s; -moz-animation-timing-function : linear; -moz-animation-ite 배급 횟수 : 무한; -moz-animation-direction : 정상; -moz-animation-delay : 0; -moz-animation-play-state : 실행 중; -moz-animation-fill-mode : 앞으로; ) / * Css3 지연 * / .slides ul li : nth-child (2), .slides ul li : nth-child (2) div (-webkit-animation-delay : 6.0s; -moz-animation-delay : 6.0 s;) .slides ul li : nth-child (3), .slides ul li : nth-child (3) div (-webkit-animation-delay : 12.0s; -moz-animation-delay : 12.0s;). slides ul li : nth-child (4), .slides ul li : nth-child (4) div (-webkit-animation-delay : 18.0s; -moz-animation-delay : 18.0s;) .slides ul li img (display : block;) / * Animation frames #anim_titles * / @ -webkit-keyframes anim_titles (0 % (왼쪽 : 100 %; 불투명도 : 0;) 5 % (왼쪽 : 10 %; 불투명도 : 1;) 20 % ( 왼쪽 : 10 %; 불투명도 : 1;) 25 % (왼쪽 : 100 %; 불투명도 : 0;) 100 % (왼쪽 : 100 %; 불투명도 : 0;)) @ -moz-keyframes anim_titles (0 % (왼쪽 : 100 %; 불투명도 : 0;) 5 % (왼쪽 : 10 %; 불투명도 : 1;) 20 % (왼쪽 : 10 %; 불투명도 : 1;) 25 % (왼쪽 : 100 %; 불투명도 : 0;) 100 % (왼쪽 : 100 %; 불투명도 : 0;)) .slides ul li div (background-color : # 000000; border-radius : 10px 10px 10px 10px; box-shadow : 000 5px #FFFFFF inset; color : #FFF FFF; 글꼴 크기 : 26px; 왼쪽 : 10 %; 여백 : 0 자동; 패딩 : 20px; 위치 : 절대; 상단 : 50 %; 너비 : 200px; / * 애니메이션 css3 * / -webkit-animation-name : anim_titles; -webkit-animation-duration : 24.0 초 -webkit-animation-timing-function : 선형; -webkit-animation-iteration-count : 무한; -webkit-animation-direction : 정상; -webkit-animation-delay : 0; -webkit-animation-play-state : 실행 중; -webkit-animation-fill-mode : 포워드; -moz-animation-name : anim_titles; -moz-animation-duration : 24. 0s; -moz-animation-timing-function : 선형; -moz-animation-iteration-count : 무한; -moz-animation-direction : 정상; -moz-animation-delay : 0; -moz-animation-play-state : 실행 중; -moz-animation-fill-mode : 앞으로; )

안녕하세요 여러분. 매우 멋진 슬라이더를 보여 드리고 싶습니다. Oooh ... 나는 당신이 나를 완전히 잊었군요. 예, 예, 저는 이미 6 개월 또는 1 년 동안 이미 사라졌고, 매일 기사를 게시하도록 강요하는 방법을 전혀 모릅니다 (완전히 사실 임에도 불구하고). 글쎄요, 그게 지금 우리가 말하는 것이 아닙니다. 슬라이더는 Tympanus Codrops에서 제공하며 HTML5, CSS3 및 TweenMax.js에서 작동합니다.

슬라이더는 왼쪽에서 오른쪽으로 또는 위에서 아래로 회전하지 않고 대각선으로 회전합니다. 탐색 화살표는 왼쪽 상단 모서리와 오른쪽 하단 모서리에 있습니다. 또한 오른쪽과 왼쪽의 썸네일을 클릭하면 탐색이 수행됩니다. 모든 애니메이션은 매우 매끄럽고 모든 최신 브라우저에서 잘 작동합니다. 각 개별 슬라이더 요소에는 미리보기를 클릭하면 열리는 자체 페이지가 있습니다. 페이지에는 사진, 제목 및 텍스트가 있습니다.

슬라이더는 갤러리, 예술가, 사진 작가, 조각가의 포트폴리오, 즉 창의적인 활동에 참여하고 사이트에 보여주고 싶은 작품이있는 모든 사람에게 적합합니다. 박물관이나 전시회 현장의 갤러리가 좋아 보일 것입니다.

갤러리 연결

갤러리를 연결하는 것은 어렵지 않을 것입니다

파일 다운로드

시작하려면 직접 링크를 사용하여 내 사이트에서 소스를 다운로드하기 만하면됩니다. 아카이브에서 img, css 및 js 폴더를 사이트의 루트에 업로드해야합니다.

CSS 및 JS 파일을 포함합니다.

그런 다음 스크립트와 스타일을 포함합니다. 스타일은 태그에 추가하여 연결됩니다. 다음 코드

페이지에서 닫는 태그까지 스크립트

사이트에 슬라이더 추가

먼저 사이트 상단에 내비게이션을 추가해 보겠습니다.

그리고 슬라이더 자체

추억과 생각

오토메이션

무작위 로밍

기계

임의의 단어

공존

유일한 가이드는 당신의 마음입니다

유령 드리프트

Bellamio

재미있는 분기

목초지

희망과 꿈

초점

오토메이션

나무를 칠하려면 친구가되어야합니다.

그냥 그렇게 놔두세요. 우리는이 흐름을 우리 마음에서 바로 흘려 보냅니다. 긴장을 풀고 흐르게하십시오. 그렇게 쉽습니다. "우리 세상에 행복한 작은 구름을 넣어 보자."아주 차가운 사진인데, 코트를 가져와야 할지도 몰라요. 저를 얼어 죽이려고합니다. 이것은 행복한 작은 바다 경치가 될 것입니다. "여기로 올라가서 재미를 시작합시다. 최소한 조금이라도 그렇게 많은 일을 할 수 있습니다. 한 번에 한 가지 일을하세요.하지 마십시오"성급하게-우리는 시간이 충분합니다. 당신의 감정, 당신의 마음, 그것은 "당신의 세계입니다.이 나무들은 너무나 재미 있습니다. 나는 그들에 대해 시작하고 멈추기가 힘듭니다.

기계

이것은 아마도 내 인생에서 일어날 가장 위대한 일일 것입니다.

우리는 "복사 할 것을 가르치려는 것이 아닙니다. 우리"는 여러분에게 기술을 가르치기 위해 여기에 있습니다. 그러면 여러분이 세상에 빠져들게합니다. 이제 우리는 "이 구름을 부 풀릴 것입니다. 우리는"여기에 행복한 나무 외에는 아무것도 없습니다. "다시 해보자. 당신이 보는 것을 사용하고, 계획하지 말라." "여기로 올라가서 재미를 시작합시다. 최소한 조금이라도 그렇게 많은 일을 할 수 있습니다. 한 번에 한 가지 일을하세요.하지 마십시오"성급하게-우리는 시간이 충분합니다. 당신의 감정, 당신의 마음, 그것은 "당신의 세계입니다.이 나무들은 너무나 재미 있습니다. 나는 그들에 대해 시작하고 멈추기가 힘듭니다.

공존

유일한 가이드는 당신의 마음입니다

"여기로 올라가서 재미를 시작합시다. 최소한 조금이라도 그렇게 많은 일을 할 수 있습니다. 한 번에 한 가지 일을하세요.하지 마십시오"성급하게-우리는 시간이 충분합니다. 당신의 감정, 당신의 마음, 그것은 "당신의 세계입니다.이 나무들은 너무나 재미 있습니다. 나는 그들에 대해 시작하고 나는 멈추기가 어렵습니다. 그러나 우리는"아직 거기에 있지 않기 때문에 우리는 "당신의 세계입니다. 이제 여기에 "행복한 작은 구름을 넣어 보자." 무슨 악마. 얇은 페인트는 두꺼운 페인트에 달라 붙습니다. 색을 조금 섞어 볼게요.

Bellamio

유일한 전제 조건은 그것이 당신을 행복하게 만드는 것입니다.

보다. 브러시의 모서리를 잡고 앞뒤로 재생합니다. 이것은 계획되지 않은 일입니다. 나는 "좀 부드럽다. 나는 카메라없이 밤비를 촬영할 수 없었다". 나는 "조금 이상하다. 나는 나무와 동물들과 이야기하는 것을 좋아한다. 그"것은 괜찮다. 나는 대부분의 사람들보다 더 재미 있습니다. 우리는 "오늘 구름을 가지고 놀 것이다."당신이 그렇게 많은 힘을 가지고 있다는 것을 알고 있습니까? 산을 이동할 수 있습니다. 너는 무엇이든 할 수있어. "여기로 올라가서 재미를 시작합시다. 조금이라도 그렇게 많은 일을 할 수 있습니다. 한 번에 한 가지 일만하세요. Don"성급하지 마세요-우리는 시간이 충분합니다. 당신의 감정, 당신의 마음, 그것은 "당신의 세계입니다.이 나무들은 너무나 재미 있습니다. 나는 그들에 대해 시작하고 멈추기가 힘듭니다.

목초지

"여기로 가서 재미를 시작합시다

종종 우리는 흐르는 물을 피하고 흐르는 물은 아주 재미 있습니다. 모든 사람은 사물을 다르게 보게 될 것입니다. "그렇게해야합니다. 크고 강한 나무에는 크고 강한 뿌리가 필요합니다. 스티브는 반사를 원하므로 그에게 반사를 제공합니다." 우리는 "약속 할 필요가 없습니다. 우리는 단지 여기서 놀고 있습니다. 구름에 사는 모든 작은 솜털을 만들고 있습니다."여기로 가서 재미를 시작합시다. 한 번에 하나씩 작업하십시오. "취하지 마십시오-우리는 시간이 충분합니다. 당신의 감정을 그것에 담아, 당신의 마음, 그것은 당신의 세계입니다." 이 나무들은 정말 재미 있습니다. 나는 그들을 시작하고 멈추는 데 어려움을 겪습니다.

초점

이것은 계획되지 않은 일입니다.

그러나 우리는 "아직 거기에 있지 않으므로"걱정할 필요가 없습니다. 이제 "행복한 작은 구름을 여기에 넣어 봅시다. 악마는 무엇입니까. 얇은 페인트가 두꺼운 페인트에 달라 붙을 것입니다. 나는"약간의 색을 섞을 것입니다. Van Dyke Brown, Permanent Red 및 약간의 Prussian Blue를 사용합니다. "여기로 올라가서 재미를 시작합시다. 최소한 조금이라도 그렇게 많은 일을 할 수 있습니다. 한 번에 한 가지 일을하세요.하지 마십시오"성급하게-우리는 시간이 충분합니다. 당신의 감정, 당신의 마음, 그것은 "당신의 세계입니다.이 나무들은 너무나 재미 있습니다. 나는 그들에 대해 시작하고 멈추기가 힘듭니다.

그게 다야. 슬라이더가 준비되었습니다! 직장에서 행운을 빕니다

웹 사이트 페이지에서 사용자의 관심을 끄는 가장 효과적인 방법 중 하나는 움직이는 애니메이션을 만드는 것입니다. 애니메이션 요소는 사용자에게 제품에 대해 더 명확하게 알리고 표시하는 데 도움이됩니다. 최근에는 사진을 스크롤하거나 클릭 할 때 나타나는 다양한 효과뿐만 아니라 슬라이딩 패널이 매우 인기를 얻고 있습니다. 슬라이더, 캐 러셀 및 슬라이드 아웃 패널이라고도합니다. 이 문서에서는 부드러운 자동 스크롤 효과가있는 반응 형 슬라이드 슬라이더를 만드는 데 중점을 둡니다.

오늘날 기성 솔루션에 대한 링크가 포함 된 수백 개의 리뷰가 네트워크에 있지만 대부분은 슬라이더의 성능을 크게 낮추고 사이트 전체의로드 속도를 늦추는 사용하지 않는 기능을 많이 포함하고 있습니다. 전문 웹 개발자는 추가 라이브러리 및 플러그인에 대한 낮은 임계 값으로 유연한 소프트웨어 제품을 만들기 위해 항상 노력해 왔습니다. 그렇기 때문에 이러한 슬라이더를 구성하기위한 최소 요구 사항이 스크립트 작업에 포함됩니다. 작업의 기능을 사용하면 전환 간격, 속도 및 특정 슬라이드 선택을 설정할 수 있습니다. 다음은 슬라이더 작동 방식을 제어하는 \u200b\u200b여러 변수입니다.

timeList -슬라이드 전환 속도

TimeView -쇼 시간

RadioBut -빠른 탐색을위한 슬라이드 아래 버튼. 기본값은 true이며 false를 사용하면 버튼이 사라집니다.

이제 시작합시다! 파일을 만들고 열자 index.htm

보시다시피 제시된 코드에는 복잡한 것이 없습니다. 슬라이더 랩 전체 위치를 결정하고 슬라이더를 화면 중앙에 정렬합니다. 매개 변수 활성 슬라이드 길이에 따라 그림의 크기와 높이를 설정합니다. 과 슬라이더 활성 사진 만 표시합니다.

이제 파일을 만들고 열어 보겠습니다. style.css 거기에 필요한 마크 업을 추가합니다.

@import URL ( 'https://fonts.googleapis.com/css?family\u003dOpen+Sans|Roboto'); body (color : # 4f4f5a; font-family : "Roboto", sans-serif; font-size : 16px; padding : 0; margin : 0;) # 슬라이더 줄 바꿈 (최대 너비 : 800px; margin : 0 auto; margin-top : 80px;) # active-slide (width : 100 %; display : table; position : relative; overflow : hidden; -webkit-user-select : none; -moz-user-select : none; -ms- user-select : none; -o-user-select : none; user-select : none;) #slider (position : relative; width : calc (100 % * 4); top : 0; left : 0; margin : 0 ; padding : 0; -webkit-transition : 1s; -o-transition : 1s; transition : 1s; -webkit-transition-timing-function : ease-in-out; -o-transition-timing-function : ease-in -out; transition-timing-function : ease-in-out;) .slide (width : calc (100 % / 4); list-style : none; display : inline; float : left;) .slide img (width : 100 %;) .Radio-But (margin-top : 10px; text-align : center;) .Radio-But .ctrl-select (margin : 2px; display : inline-block; width : 16px; height : 16px; overflow : 숨김, 텍스트 들여 쓰기 : -9999px, 배경 : url (radioBg.p ng) 중앙 하단 반복 없음; ) .Radio-But .ctrl-select : hover (커서 : 포인터; background-position : center center;) .Radio-But .ctrl-select.active (background-position : center top;) #prewbutton, #nextbutton (display : 블록; 너비 : 40px; 높이 : 100 %; 위치 : 절대; 상단 : 0; 오버플로 : 숨김; 텍스트 들여 쓰기 : -999px; 배경 : URL ( "arrowBg.png") 왼쪽 가운데 반복 없음; 불투명도 : 0.5 ; z-index : 3; outline : none! Important;) #prewbutton (left : 10px;) #nextbutton (right : 10px; background : url (arrowBg.png) right center no-repeat;) #prewbutton : hover, # 다음 버튼 : 호버 (불투명도 : 1;)

스타일 속성 슬라이더 랩 써 내려 가다 폭 -사진의 최대 길이.

스타일 속성 #slider (너비 : calc (100 % * 4);) 과 .slide (너비 : calc (100 % / 4);) 슬라이더에서 사진 수를 지정합니다. 이 예에는 4 개가 있습니다.

앞으로 / 뒤로 화살표가 슬라이더의 가시성을 방해하는 경우 해당 화살표를 숨기고 마우스 오버시 표시 할 수 있습니다. 이렇게하려면 매개 변수에서 하지만 과 다음하지만, 불투명도 속성을 0으로 설정합니다.

이제 파일을 만들고 열어 보겠습니다. slider.js, 슬라이더 코드가 포함됩니다. jQuery 라이브러리를 포함하는 것을 잊지 마십시오.

$ (문서) .ready (function () (var timeList \u003d 700; var TimeView \u003d 5000; var RadioBut \u003d true; var slideNum \u003d 1; var slideTime; slideCount \u003d $ ( "# slider .slide"). length; var animSlide \u003d function (화살표) (clearTimeout (slideTime); if (arrow \u003d\u003d "next") (if (slideNum \u003d\u003d slideCount) (slideNum \u003d 1;) else (slideNum ++) translateWidth \u003d-$ ( "# active-slide ") .width () * (slideNum-1); $ ("# 슬라이더 "). css (("transform ":"translate ( "+ translateWidth +"px, 0) "));) else if (arrow \u003d \u003d "prew") (if (slideNum \u003d\u003d 1) (slideNum \u003d slideCount;) else (slideNum- \u003d 1) translateWidth \u003d-$ ( "# active-slide"). width () * (slideNum-1); $ ( "#slider"). css (( "transform": "translate ("+ translateWidth + "px, 0)"));) else (slideNum \u003d arrow; translateWidth \u003d-$ ( "# active-slide"). width () * (slideNum -1); $ ( "# slider"). css (( "transform": "translate ("+ translateWidth + "px, 0)"));) $ ( ". ctrl-select. active ") .removeClass ("active "); $ (". ctrl-select "). eq (slideNum-1) .addClass ("active ");) if (RadioBut) (var $ linkArrow \u003d $ ("<>") .prependTo ("# active-slide "); $ ("# nextbutton "). click (function () (animSlide ("next "); return false;)) $ ("# prewbutton "). click (function () (animSlide ( "prew"); return false;))) var adderSpan \u003d ""; $ ( ". slide"). each (function (index) (adderSpan + \u003d " "+ 색인 +""; }); $("

"+ adderSpan +"

") .appendTo ("# slider-wrap "); $ (". ctrl-select : first "). addClass ("active "); $ (". ctrl-select "). (function () (var goToNum \u003d parseFloat ($ (this) .text ()); animSlide (goToNum + 1);)); var pause \u003d false; var rotator \u003d function () (if (! pause) (slideTime \u003d setTimeout (function () (animSlide ( "next")), TimeView);)) $ ( "# 슬라이더 랩"). hover (function () (clearTimeout (slideTime); pause \u003d true;), function () (pause \u003d false; rotator () ;)); var click \u003d false; var prevX; $ ( ". slide"). mousedown (함수 (e) (clicking \u003d true; prevX \u003d e.clientX;)); $ ( ". slide"). mouseup ( function () (clicking \u003d false;)); $ (document) .mouseup (function () (clicking \u003d false;)); $ ( ". slide"). mousemove (function (e) (if (clicking \u003d\u003d true ) (if (e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > prevX) (animSlide ( "prew"); clearTimeout (slideTime);) click \u003d false; ))); $ ( ". slide"). hover (). css ( "cursor", "pointer"); 회 전자 (); ));

함수 animSlide 다음, 이전, 숫자 값의 세 가지 값을 사용합니다. 다음 매개 변수는 다음 슬라이드를 토글하고 prew는 이전 슬라이드를 반환하며 숫자 값은 확실히 슬라이드 아래의 라디오 버튼을 통해 선택된 지정된 슬라이드입니다.

제시된 슬라이더는 웹 리소스 https://pixabay.com/의 사진을 사용합니다.

사이트에 고품질 jQuery 이미지 슬라이더를 추가해야하는 경우이 기사에서 필요한 플러그인에 대한 설명을 찾을 수 있습니다. jQuery는 JavaScript를 훨씬 쉽게 사용할 수 있도록 만들었지 만 웹 디자인 프로세스의 속도를 높이려면 여전히 플러그인이 필요합니다.

이러한 플러그인 중 일부를 변경하고 사이트의 목표에 훨씬 더 부합하는 새로운 슬라이더를 만들 수 있습니다.

다른 슬라이더의 경우 제목, 이미지를 추가하고 슬라이더와 함께 제공되는 슬라이드 변경 효과를 선택하기 만하면됩니다. 이 플러그인은 모두 광범위한 문서와 함께 제공되므로 새로운 효과 나 기능을 쉽게 추가 할 수 있습니다. 숙련 된 jQuery 프로그래머라면 이벤트 기반 트리거를 변경할 수도 있습니다.

반응 형 디자인과 같은 최신 트렌드는 플러그인을 구현하든 스크립트를 구현하든 웹 프로젝트에 매우 중요합니다. 이러한 모든 요소는 이러한 각 플러그인을 매우 유연하게 만듭니다. 2014 년에 나온 모든 것이이 목록에 포함되어 있습니다.

JQuery 이미지 슬라이더

Jssor 반응 형 슬라이더

나는 최근에이 기능적인 jQuery 슬라이더를 발견했고 그것이 그 일을 아주 잘한다는 것을 직접 볼 수있었습니다. 여기에는 오픈 소스 슬라이더 코드를 통해 확장 할 수있는 무한한 가능성이 있습니다.

적응 형 디자인;
15 개 이상의 사용자 지정 옵션;
15 개 이상의 이미지 변경 효과;
이미지 갤러리, 캐 러셀, 전체 화면 크기 지원;
수직 배너 회전 장치, 슬라이드 목록;
비디오 지원.

데모 | 다운로드

PgwSlider-JQuery / Zepto 기반 반응 형 슬라이더

이 플러그인의 유일한 기능은 이미지 슬라이드를 표시하는 것입니다. jQuery 파일이 2.5KB에 불과하므로 매우 콤팩트하여로드가 정말 빠릅니다.

반응 형 레이아웃;
SEO 최적화;
다른 브라우저 지원;
간단한 이미지 전환;
아카이브 크기는 2.5KB에 불과합니다.

데모 | 다운로드

Jquery 수직 뉴스 슬라이더

왼쪽에 게시물 목록과 오른쪽에 이미지가있는 뉴스 리소스 용으로 설계된 유연하고 유용한 jQuery 슬라이더 :

적응 형 디자인;
뉴스 전환을위한 세로 열;
확장 된 헤더.

데모 | 다운로드

Wallop 슬라이더

이 슬라이더에는 JQuery가 포함되어 있지 않지만 매우 컴팩트하고 페이지로드 시간을 크게 줄일 수 있으므로 소개하고 싶습니다. 마음에 들면 알려주세요.

반응 형 레이아웃;
심플한 디자인;
슬라이드 변경을위한 다양한 옵션;
최소한의 JavaScript 코드;
크기는 3KB에 불과합니다.

데모 | 다운로드

플랫 스타일 폴라로이드 갤러리

유연한 레이아웃과 아름다운 디자인의 흩어져있는 문서 갤러리는 많은 사람들의 관심을 끌 것입니다. 태블릿 및 대형 디스플레이에 더 적합 :

반응 형 슬라이더;
평면 디자인;
슬라이드의 무작위 변경;
소스 코드에 대한 전체 액세스 권한입니다.

데모 | 다운로드

A- 슬라이더

데모 | 다운로드

HiSlider-HTML5, jQuery 및 WordPress 이미지 슬라이더

HiSlider는 환상적인 전환으로 다양한 이미지 갤러리를 만들 수있는 새로운 무료 jQuery 슬라이더 플러그인을 도입했습니다.

반응 형 슬라이더;
프로그래밍 지식이 필요하지 않습니다.
몇 가지 멋진 템플릿과 스킨;
아름다운 전환 효과;
다양한 플랫폼 지원;
WordPress, Joomla, Drupal과 호환됩니다.
다양한 유형의 콘텐츠 표시 기능 : 이미지, YouTube 동영상 및 Vimeo 동영상
유연한 사용자 정의;
유용한 추가 기능;
무제한 콘텐츠가 표시됩니다.

데모 | 다운로드

와우 슬라이더

WOW Slider는 놀라운 비주얼을 가진 반응 형 jQuery 이미지 슬라이더입니다 ( 도미노, 회전, 흐림, 뒤집기 및 플래시, 날아 가기, 블라인드) 및 전문 템플릿.

WOW Slider는 설치 마법사와 함께 제공되어 코드를 살펴보고 이미지를 편집하지 않고도 몇 초 만에 환상적인 슬라이더를 만들 수 있습니다. Joomla 및 WordPress 용 플러그인 버전도 다운로드 할 수 있습니다.

완전히 반응
모든 브라우저 및 모든 유형의 장치 지원
터치 장치 지원;
WordPress에 쉽게 설치;
맞춤화의 유연성;
SEO 최적화.

데모 | 다운로드

Nivo Slider는 무료 jQuery 플러그인입니다.

Nivo Slider는 가장 아름답고 사용하기 쉬운 이미지 슬라이더로 전 세계적으로 알려져 있습니다. Nivo Slider 플러그인은 무료이며 MIT 라이선스에 따라 출시되었습니다.

JQuery 1.7 이상이 필요합니다.
아름다운 전환 효과;
구성이 간단하고 유연합니다.
작고 적응력이 있습니다.
오픈 소스;
강력하고 간단합니다.
여러 다른 템플릿;
자동 이미지 자르기.

데모 | 다운로드

기술 문서가 포함 된 간단한 jQuery 슬라이더

이 아이디어는 여러 가지 작은 요소가 다양한 애니메이션 효과로 날아갈 수있는 Apple의 슬라이더에서 영감을 얻었습니다. 개발자는 "날아가는"요소가 서로 다른 범주를 나타내는 온라인 상점의 단순한 디자인을 만들기위한 최소 요구 사항을 고려하여이 개념을 구현하려고했습니다.

반응 형 레이아웃;
최소한의 디자인;
다양한 드롭 아웃 및 슬라이드 전환 효과.

데모 | 다운로드

전체 크기 jQuery 이미지 슬라이더

페이지 너비의 100 %를 차지하고 모바일 화면 크기에 맞게 조정되는 매우 간단한 슬라이더입니다. CSS 전환과 함께 작동하며 이미지는 앵커로 "스택"됩니다. 링크를 이미지에 연결하지 않으려면 앵커를 교체하거나 제거 할 수 있습니다.

설치되면 슬라이더가 화면 너비의 100 %로 확장됩니다. 또한 슬라이드 이미지의 크기를 자동으로 줄일 수 있습니다.

반응 형 jQuery 슬라이더;
전체 크기;
미니멀리즘 디자인.

데모 | 다운로드

Elastic Content Slider + 튜토리얼

Elastic Content Slider는 부모 요소의 크기에 따라 너비와 높이를 자동으로 조정합니다. 이것은 간단한 jQuery 슬라이더입니다. 상단의 슬라이드 영역과 하단의 탐색 탭 막대로 구성됩니다. 슬라이더는 부모 컨테이너에 맞게 너비와 높이를 조정합니다.

대각선으로 작은 화면에서 보면 탐색 탭이 작은 아이콘으로 바뀝니다.

적응 형 디자인;
마우스 클릭으로 스크롤.

데모 | 다운로드

무료 3D 스택 슬라이더

3D로 이미지를 넘기는 실험용 슬라이더입니다. 두 더미는 종이 더미와 비슷하며 스크롤 할 때 슬라이더 중앙에 이미지가 표시됩니다.

적응 형 디자인;
플립 전환;
3D 효과.

데모 | 다운로드

JQuery 및 CSS3로 구동되는 전체 화면 슬릿 슬라이더 + 튜토리얼

이 튜토리얼은 트위스트 된 슬라이더를 만드는 방법을 보여줍니다. 아이디어는 다음 또는 이전 이미지를 여는 동안 현재 슬라이드를 잘라서 표시하는 것입니다. jQuery 및 CSS 애니메이션을 사용하여 고유 한 전환 효과를 만들 수 있습니다.

적응 형 디자인;
분할 전환;
전체 화면 슬라이더.

데모 | 다운로드

Unislider는 매우 작은 jQuery 슬라이더입니다.

불필요한 벨과 휘파람 및 마크 업이 없으며 크기는 3KB 미만입니다. 슬라이드에 HTML 코드를 사용하고 CSS로 확장하세요. Unslider와 관련된 모든 것은 GitHub에서 호스팅됩니다.

다양한 브라우저 지원;
키보드 지원;
높이 조정;
적응 형 디자인;
터치 입력 지원.

데모 | 다운로드

최소한의 반응 형 슬라이드

간단하고 컴팩트 한 플러그인 ( 크기는 1Kb에 불과합니다.), 컨테이너 내부의 요소를 사용하여 반응 형 슬라이더를 만듭니다. ResponsiveSLides.js는 IE6 이상의 모든 IE 버전을 포함하여 다양한 브라우저에서 작동합니다.

완전히 반응
크기 1KB;
JavaScript를 통해 실행할 수있는 CSS3 전환
글 머리 기호 목록을 사용한 간단한 마크 업
전환 효과 및 슬라이드보기 시간을 사용자 정의하는 기능
여러 슬라이드 쇼를 만드는 기능을 지원합니다.
자동 및 수동 스크롤.

데모 | 다운로드

카메라-무료 jQuery 슬라이더

카메라는 많은 전환 효과, 반응 형 레이아웃이있는 플러그인입니다. 간편한 설정, 모바일 지원 :

완벽하게 반응하는 디자인
서명;
비디오를 추가하는 기능;
33 가지 색상 아이콘.

데모 | 다운로드

반응 형 jQuery 플러그인 인 SlidesJS

SlidesJS는 터치 지원 및 CSS3 전환이있는 반응 형 jQuery 플러그인 (1.7.1 이상)입니다. 프로젝트에 SlidesJS를 추가하는 방법을 알아내는 데 도움이되는 몇 가지 미리 만들어진 예제를 사용해보십시오.

적응 형 디자인;
CSS3 전환;
터치 장치 지원;
설정이 쉽습니다.

데모 | 다운로드

BX Jquery 슬라이더

이것은 무료 반응 형 jQuery 슬라이더입니다.

완벽하게 반응-모든 장치에 적응합니다.
슬라이드의 수평, 수직 변경;
슬라이드에는 이미지, 비디오 또는 HTML 콘텐츠가 포함될 수 있습니다.
터치 장치에 대한 확장 된 지원;
슬라이드 애니메이션에 CSS 전환 사용 ( 하드웨어 가속);
콜백 API 및 완전 공개 메소드
작은 파일 크기;
구현하기 쉽습니다.

데모 | 다운로드

FlexSlider 2

반응이 가장 좋은 슬라이더. 작업 속도, 소형화를 높이기 위해 새 버전이 개선되었습니다.

데모 | 다운로드

Galleria-JavaScript 기반 반응 형 사진 갤러리

Galleria는 수백만 사이트에서 고품질 이미지 갤러리를 만드는 데 사용됩니다. 그녀의 작업에 대한 긍정적 인 리뷰의 수는 단순히 규모를 벗어났습니다.

완전 무료;
전체 화면보기;
100 % 반응;
프로그래밍 경험이 필요하지 않습니다.
iPhone, iPad 및 기타 터치 장치 지원;
Flickr, Vimeo, YouTube 등
여러 주제.

데모 | 다운로드

Blueberry는 간단한 반응 형 jQuery 이미지 슬라이더입니다.

반응 형 웹 디자인을 위해 특별히 작성된 jQuery 이미지 슬라이더를 소개합니다. Blueberry는 반응 형 템플릿과 함께 작동하도록 특별히 작성된 실험적인 오픈 소스 이미지 슬라이더 플러그인입니다.

목차

관련 기사

코드 정보

비교 (전 / 후) 슬라이더

코드 정보

코드 정보

코드 정보

코드 정보

전체 화면 슬라이더

코드 정보

코드 정보

코드 정보

코드 정보

반응 형 슬라이더

코드 정보

이미지 불투명도 슬라이더

코드 정보

스택 형 유연한 슬라이드 레이아웃

코드 정보

반응 형 슬라이더

코드 정보

마스크 된 텍스트가있는 슬라이더

코드 정보

코드 정보

코드 정보

순수 HTML / CSS 슬라이더

코드 정보

코드 정보

코드 정보

코드 정보

코드 정보

간단한 슬라이더

다축 이미지 슬라이더

HTML 마크 업

CSS

갤러리 연결

파일 다운로드

CSS 및 JS 파일을 포함합니다.

사이트에 슬라이더 추가

오토메이션

기계

공존

유일한 가이드는 당신의 마음입니다

Bellamio

목초지

초점

오토메이션

나무를 칠하려면 친구가되어야합니다.

기계

이것은 아마도 내 인생에서 일어날 가장 위대한 일일 것입니다.

공존

유일한 가이드는 당신의 마음입니다

Bellamio

유일한 전제 조건은 그것이 당신을 행복하게 만드는 것입니다.

목초지

"여기로 가서 재미를 시작합시다

초점

이것은 계획되지 않은 일입니다.

JQuery 이미지 슬라이더

Jssor 반응 형 슬라이더

PgwSlider-JQuery / Zepto 기반 반응 형 슬라이더

Jquery 수직 뉴스 슬라이더

Wallop 슬라이더

플랫 스타일 폴라로이드 갤러리

A- 슬라이더

HiSlider-HTML5, jQuery 및 WordPress 이미지 슬라이더

와우 슬라이더

Nivo Slider는 무료 jQuery 플러그인입니다.

기술 문서가 포함 된 간단한 jQuery 슬라이더

전체 크기 jQuery 이미지 슬라이더

Elastic Content Slider + 튜토리얼

무료 3D 스택 슬라이더

JQuery 및 CSS3로 구동되는 전체 화면 슬릿 슬라이더 + 튜토리얼

Unislider는 매우 작은 jQuery 슬라이더입니다.

최소한의 반응 형 슬라이드

카메라-무료 jQuery 슬라이더

반응 형 jQuery 플러그인 인 SlidesJS

BX Jquery 슬라이더

FlexSlider 2

Galleria-JavaScript 기반 반응 형 사진 갤러리