사이트에 고품질 jQuery 이미지 슬라이더를 추가해야 하는 경우 이 문서에서 필요한 플러그인에 대한 설명을 찾을 수 있습니다. JQuery를 통해 JavaScript 작업이 훨씬 쉬워졌지만 웹 디자인 프로세스 속도를 높이려면 여전히 플러그인이 필요합니다.

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

다른 슬라이더의 경우 제목, 이미지를 추가하고 슬라이더와 함께 제공되는 슬라이드 전환 효과를 선택하기만 하면 됩니다. 이러한 모든 플러그인에는 자세한 문서가 함께 제공되므로 새로운 효과나 기능을 추가하는 것이 어렵지 않습니다. 숙련된 JQuery 프로그래머라면 이벤트 기반 트리거를 변경할 수도 있습니다.

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

jQuery 이미지 슬라이더

Jssor 반응형 슬라이더

저는 최근에 이 강력한 jQuery 슬라이더를 발견했고 그것이 제 역할을 매우 잘 수행한다는 것을 직접 확인할 수 있었습니다. 개방성을 통해 확장할 수 있는 무한한 가능성을 담고 있습니다. 소스 코드슬라이더:

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

데모 | 다운로드

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

이 플러그인의 유일한 작업은 이미지 슬라이드를 표시하는 것입니다. JQuery 파일의 크기가 2.5KB에 불과하여 매우 빠르게 로드할 수 있으므로 매우 컴팩트합니다.

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

데모 | 다운로드

Jquery 수직 뉴스 슬라이더

왼쪽에는 출판물 목록이 있고 오른쪽에는 이미지가 표시되는 뉴스 리소스용으로 설계된 유연하고 유용한 JQuery 슬라이더입니다.

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

데모 | 다운로드

월롭 슬라이더

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

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

데모 | 다운로드

평면형 폴라로이드 갤러리

유연한 레이아웃과 테이블 위에 흩어져 있는 문서 스타일의 갤러리입니다. 아름다운 디자인많은 분들이 관심을 가지실 것 같습니다. 태블릿 및 대형 디스플레이에 더 적합:

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

데모 | 다운로드

A-슬라이더

데모 | 다운로드

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

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

  • 적응형 슬라이더;
  • 프로그래밍 지식이 필요하지 않습니다.
  • 몇 가지 놀라운 템플릿과 스킨;
  • 아름다운 전환 효과;
  • 다양한 플랫폼 지원
  • WordPress, Joomla, Drupal과 호환됩니다.
  • 콘텐츠를 표시하는 기능 다른 유형: 이미지, 유튜브 영상및 Vimeo 비디오;
  • 유연한 설정;
  • 유용한 추가 기능;
  • 표시되는 콘텐츠의 양은 무제한입니다.

데모 |다운로드

와우 슬라이더

와우 슬라이더는 반응형 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개의 다양한 색상 아이콘.

데모 |다운로드

SlidesJS, 반응형 jQuery 플러그인

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

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

데모 | 다운로드

BX Jquery 슬라이더

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

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

데모 |다운로드

플렉스슬라이더 2

최고의 반응형 슬라이더. 새 버전속도와 콤팩트함을 높이기 위해 수정되었습니다.

데모 | 다운로드

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

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

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

데모 | 다운로드

Blueberry - 간단한 반응형 jQuery 이미지 슬라이더

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

Temdo Slider는 웹사이트에 아름다운 슬라이더를 만들기 위한 강력하고 사용하기 쉬운 도구입니다. 슬라이더의 주요 기능:

  • 각 슬라이드의 배경으로 이미지나 비디오를 선택할 수 있습니다.
  • 추가 오버레이 이미지
  • 스크롤 애니메이션
  • 슬라이드 변경 시 애니메이션

아름다운 "클래식" 슬라이더(배경, 2개 이하의 추가 그래픽 레이어, 제목, 부제, 텍스트 및 각 슬라이드에 2개 이하의 버튼)를 만들어야 하는 경우, 특히 다음과 같은 경우에는 Temdo Slider를 사용하는 것이 좋습니다. 전체 화면 슬라이더와 배경 비디오가 필요합니다.

슬라이더 만들기

새 슬라이더를 만들려면 왼쪽 메뉴에서 WordPress 콘솔항목 선택 슬라이더 > 새 슬라이드를 추가합니다.

슬라이드형

기본 슬라이드 설정은 배경 유형(이미지 또는 비디오)입니다. 이 매개변수의 선택에 따라 슬라이드 설정 인터페이스가 변경됩니다. 설정 그룹 대신 비디오를 선택할 때 정적 배경한 무리가 나타난다 애니메이션 배경.

슬라이드 배경

슬라이드의 배경 이미지를 선택합니다. 배경 이미지는 화면의 전체 너비를 채우도록 늘어납니다(가로세로 비율은 유지하면서). 따라서 Full HD(1920 x 1080픽셀) 이미지 사용을 권장합니다. 슬라이더가 전체 화면 높이를 차지하지 않도록 하려면 슬라이더 설정에서 높이를 설정해야 합니다.

오버레이 이미지

추가 이미지를 투명 또는 반투명 배경메인 배경 이미지 위에 오버레이된 이미지는 슬라이드 전체 표면에 텍스처로 복제됩니다.

배경 애니메이션

배경 이미지에 애니메이션을 적용하려면 이 옵션을 활성화하세요. 활성화되면 다음 유형의 애니메이션을 사용할 수 있습니다.

  • 중심을 기준으로 한 배율(기본값)
  • 왼쪽 상단을 기준으로 한 배율
  • 오른쪽 상단 모서리를 기준으로 한 배율
  • 왼쪽 하단 모서리를 기준으로 한 배율
  • 오른쪽 하단 모서리를 기준으로 한 배율

배경 비디오

Temdo 슬라이더는 webm, mp4 및 ogg 비디오 형식을 지원합니다.

비디오를 배경으로 사용하려면 먼저 해당 비디오를 사이트의 미디어 라이브러리에 업로드해야 합니다. 이렇게 하려면 WordPress 대시보드의 왼쪽 패널에서 미디어 파일 > 새로 추가. 비디오 다운로드가 완료되면 해당 주소를 클립보드에 복사하고 슬라이드 편집으로 돌아갑니다. 클립보드의 비디오 파일 경로를 슬라이드 설정의 해당 섹션에 붙여넣습니다. 가능한 한 많은 최신 브라우저를 지원하려면 가능하면 세 가지 형식 모두의 비디오를 사용하는 것이 좋습니다.

슬라이드 속성

이 섹션에서는 슬라이드의 기본 매개변수를 설정합니다.

  • 헤더 디자인: 어두운 배경에 어울리는 밝은 디자인을 선택하거나 밝은 배경과 헤더를 대조하는 어두운 디자인을 선택할 수 있습니다.
  • 탐색 색상: 슬라이더 하단에 있는 왼쪽-오른쪽 화살표와 탐색 점의 색상을 선택합니다.
  • 섹션으로 스크롤: 클릭하면 페이지를 지정된 위치로 스크롤하는 화살표를 표시합니다. 앵커 이름을 입력하세요(예: '#contact')
  • 제목 표시 안 함: 이 슬라이드에 제목을 표시하지 않으려면 이 옵션을 활성화합니다.
  • 제목 그림자 표시 안 함: 이 슬라이드의 제목 그림자를 끕니다.
  • 그래픽 애니메이션: 슬라이드 그래픽에 대한 두 가지 애니메이션 효과 중에서 선택하세요.
  • 콘텐츠 애니메이션: 제목, 부제, 텍스트 및 버튼에 애니메이션을 적용하는 두 가지 방법 중에서 선택하세요.

슬라이드 콘텐츠 스타일 설정

슬라이드 텍스트 콘텐츠 스타일 설정(제목, 부제 및 텍스트)은 해당 설정 그룹에서 설정됩니다.

  • 슬라이드 제목
  • 슬라이드 자막
  • 슬라이드 텍스트

이러한 각 그룹에서는 각 요소의 글꼴, 색상, 크기 및 기타 스타일 매개변수를 설정할 수 있습니다.

그래픽 및 SVG 그래픽

여기에서 추가 다운로드를 할 수 있습니다 그래픽 요소() 및 SVG 형식의 벡터 그래픽. 이러한 각 요소에 대해 요소를 클릭하면 열리는 링크를 설정할 수 있습니다.

슬라이드의 버튼

이 섹션에서는 하나 또는 두 개의 버튼에 대한 매개변수를 설정할 수 있습니다.

  • 버튼 텍스트
  • 링크
  • 호버 애니메이션
  • 상

스크롤할 때 슬라이드 애니메이션

이 섹션에서는 슬라이드의 전체 내용을 스크롤할 때 애니메이션을 켜거나 끌 수 있습니다. 개별 요소슬라이드. 원한다면 (그리고 가능하다면) 생산할 수 있습니다 미세 조정 CSS 스타일을 사용한 애니메이션.

슬라이드 저장

슬라이드를 저장하기 전에 슬라이더 섹션에서 해당 확인란을 활성화하여 하나 이상의 슬라이더에 추가하십시오. 아직 슬라이더가 없다면 링크를 클릭하세요. + 새 슬라이더 추가:

시간은 가만히 있지 않고 진행됩니다. 이는 인터넷에도 영향을 미쳤습니다. 이미 어떻게 변화하고 있는지 확인할 수 있습니다 모습웹사이트, 반응형 디자인이 특히 인기가 많습니다. 그리고 이와 관련하여 꽤 많은 새로운 것이 나타났습니다. 적응형 jquery 슬라이더, 갤러리, 캐러셀 또는 유사한 플러그인.
1. 반응형 수평 포스트 슬라이더

적응형 수평 캐러셀 자세한 지침설치 중. 심플한 스타일로 제작되었지만, 자신에게 맞게 스타일을 연출하실 수 있습니다.

2. Glide.js의 슬라이더

이 슬라이더는 모든 웹사이트에 적합합니다. 오픈 소스 Glide.js를 사용합니다. 슬라이더 색상은 쉽게 변경할 수 있습니다.

3. 기울어진 콘텐츠 슬라이드쇼

콘텐츠가 포함된 반응형 슬라이더. 이 슬라이더의 하이라이트는 이미지의 3D 효과와 무작위 모양의 다양한 애니메이션입니다.

4. HTML5 캔버스를 사용한 슬라이더

대화형 입자가 포함된 매우 아름답고 인상적인 슬라이더입니다. HTML5 캔버스를 이용하여 제작되었으며,

5. 이미지 모핑 슬라이더

모핑 효과가 있는 슬라이더(한 개체에서 다른 개체로의 부드러운 변형) 안에 이 예에서는슬라이더는 포트폴리오 형태로 웹 개발자나 웹 스튜디오의 포트폴리오에 매우 적합합니다.

6. 원형 슬라이더

이미지를 뒤집는 효과가 있는 원 형태의 슬라이더입니다.

7. 배경이 흐린 슬라이더

전환 및 배경 흐림 기능이 있는 적응형 슬라이더입니다.

8. 반응형 패션 슬라이더

간단하고 가벼우며 반응성이 뛰어난 웹사이트 슬라이더입니다.

9. Slicebox - jQuery 3D 이미지 슬라이더(업데이트됨)

수정 사항과 새로운 기능이 포함된 Slicebox 슬라이더의 업데이트된 버전입니다.

10.무료 애니메이션 반응형 이미지 그리드

다양한 애니메이션과 타이밍을 사용하여 샷을 전환하는 유연한 이미지 그리드를 생성하는 JQuery 플러그인입니다. 새로운 이미지와 전환을 선택적으로 표시할 수 있으므로 웹사이트의 배경이나 장식 요소로 보기 좋게 보일 수 있습니다. 플러그인은 여러 버전으로 제공됩니다.

11.플렉스 슬라이더

귀하의 웹사이트를 위한 범용 무료 플러그인입니다. 이 플러그인은 여러 슬라이더 및 캐러셀 옵션으로 제공됩니다.

12. 포토 프레임

사진범용 플러그인입니다. 다양한 설정이 있고 모든 것이 빠르고 쉽게 작동하며 슬라이드를 전체 화면으로 볼 수 있습니다. 슬라이더는 고정된 크기와 적응형, 썸네일 유무, 원형 스크롤 유무 등으로 사용할 수 있습니다.

추신슬라이더를 여러번 설치했는데 최고 중 하나라고 생각합니다

13. 축소판이 포함된 무료 적응형 3D 슬라이더 갤러리.

실험적인 갤러리 슬라이더 3DPanel레이아웃그리드와 흥미로운 애니메이션 효과가 있습니다.

14. CSS3의 슬라이더

적응형 슬라이더는 콘텐츠의 부드러운 모양과 가벼운 애니메이션을 갖춘 CSS3를 사용하여 만들어졌습니다.

15. 와우 슬라이더

와우 슬라이더놀라운 시각 효과를 지닌 이미지 슬라이더입니다.

17. 탄성

완전한 반응성과 슬라이드 썸네일을 갖춘 탄력적인 슬라이더.

18. 슬릿

CSS3 애니메이션을 사용한 전체 화면 반응형 슬라이더입니다. 슬라이더는 두 가지 버전으로 만들어집니다. 애니메이션은 매우 독특하고 아름답게 완성되었습니다.

19. 적응형 사진 갤러리 플러스

이미지 로딩 기능이 있는 간단한 무료 갤러리 슬라이더입니다.

20. WordPress용 반응형 슬라이더

WP용 적응형 프리 슬라이더.

21. 시차 콘텐츠 슬라이더

시차 효과가 있는 슬라이더와 CSS3를 사용하여 각 요소를 제어합니다.

22. 음악 링크가 포함된 슬라이더

JPlayer 오픈 소스 코드를 사용하는 슬라이더. 이 슬라이더는 음악이 포함된 프레젠테이션과 유사합니다.

23. jmpress.js를 사용한 슬라이더

반응형 슬라이더는 jmpress.js를 기반으로 하므로 슬라이드에 흥미로운 3D 효과를 추가할 수 있습니다.

24. 빠른 호버 슬라이드쇼

빠른 슬라이드 전환이 가능한 슬라이드 쇼. 마우스를 올리면 슬라이드 스위치가 켜집니다.

25. CSS3를 사용한 이미지 아코디언

CSS3을 사용한 이미지 아코디언.

26. 터치 최적화 갤러리 플러그인

터치기기에 최적화된 반응형 갤러리입니다.

27. 3D 갤러리

3D 벽 갤러리-를 위해 생성됨 사파리 브라우저, 3D 효과가 표시됩니다. 다른 브라우저에서 보시면 기능은 잘 되겠지만 3D 효과가 눈에 띄지 않습니다.

28. 페이지 매김 기능이 있는 슬라이더

JQuery UI 슬라이더를 사용한 페이지 매김 기능이 있는 반응형 슬라이더입니다. 아이디어는 간단한 탐색 개념을 사용하는 것입니다. 모든 이미지를 되감거나 슬라이드별로 전환하는 것이 가능합니다.

29.jQuery를 이용한 이미지 몽타주

화면 너비에 따라 이미지를 자동으로 정렬합니다. 포트폴리오 웹사이트를 개발할 때 매우 유용한 기능입니다.

30. 3D 갤러리

CSS3와 jQuery를 사용한 간단한 3D 원형 슬라이더.

31. 전체 화면 모드 CSS3 및 jQuery를 사용하여 3D 효과 적용

아름다운 전환으로 이미지를 전체 화면으로 볼 수 있는 슬라이더입니다.

별도로 사용하면 CSS3와 jQuery는 다음을 제공합니다. 넓은 범위기회. 하지만 함께 사용하면... 정말 인상적인 효과를 만들 수 있습니다. 때로는 여러 이미지나 사진을 어떻게 더 훌륭하고 창의적으로 배열할 수 있는지에 대한 문제가 발생합니다. 공통 주제한 곳에서. 옵션으로 슬라이더를 만들 수 있습니다(특히 슬라이더 수가 많기 때문에). 하지만 이 튜토리얼에서는 CSS3와 jQuery를 사용하여 대화형 3D 갤러리를 만들어 보겠습니다. 신속하게 파악하고 웹 사이트에 슬라이더를 적용하려면 데모 버전을 다운로드하고(전체 뉴스에서도 사용 가능) 예제에서 간단히 유추해 보는 것이 좋습니다.

실제 예는 여기에서 볼 수 있습니다.

다운로드

HTML 부분 - 흥미로운 jQuery 슬라이더

클래스가 포함된 컨테이너 기본배경을 표시하는 데 사용됩니다. 그런 다음 식별자 immersive_slider가 있는 블록 내부에 필요한 만큼 슬라이드를 추가할 수 있습니다. 슬라이드 이동 버튼은 필요하지 않은 경우 제거할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div 클래스 = "메인" > ... <div id = "immersive_slider" > << >"> ... </div> <div 클래스 = "슬라이드" 데이터 흐리게 = "< >"> ... </div> ... <a href = "#" 클래스 = "is-prev" >« </a> <a href = "#" 클래스 = "is-next" >» </a> </div> </div>

jQuery 부분

1 2 3 4 5 6 7 8 $("#immersive_slider") .immersive_slider (( animation: "fade" , SlideSelector: ".slide" , 컨테이너: ".main" , cssBlur: false , 페이지 매기기: true , autoStart: 5000 ) ) ;

슬라이더 예제를 볼 때 알 수 있듯이 다른 . 이러한 전환에 대한 모든 설정은 위의 기능에 있습니다. 다음 설정을 살펴보겠습니다.

  • 생기— 슬라이드 변경 방법을 결정하는 값입니다. "페이드", "슬라이드" 또는 "바운스" 값을 허용합니다. 그리고 슬라이드를 수직으로 변경하려면 “slideUp” 또는 “bounceUp”을 입력해야 합니다.
  • 슬라이드선택기— 슬라이드가 있는 블록을 선택하기 위한 선택기입니다.
  • 컨테이너— 이 속성은 배경이 변경될 기본 컨테이너를 정의합니다.
  • CSS블러이것은 평가판 기능입니다. 흐림을 설정하지 않으려면 이 속성을 설정하지 마세요.
  • 쪽수 매기기— 탐색을 활성화합니다.
  • 자동 시작— 슬라이드 쇼가 자동으로 시작됩니다.