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

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

아름다운 "클래식" 슬라이더(배경, 추가 그래픽 레이어 2개 이하, 제목, 자막, 텍스트, 슬라이드당 2개 이하 버튼)를 생성해야 하는 경우 Temdo Slider가 권장되며 특히 전체 화면 슬라이더가 필요한 경우 그리고 배경 영상.

슬라이더 만들기

새 슬라이더를 만들려면 WordPress 대시보드의 왼쪽 메뉴에서 슬라이더 > 새 슬라이드 추가:

슬라이드 유형

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

슬라이드 배경

슬라이드의 배경 이미지를 선택합니다. 배경 이미지는 화면의 전체 너비로 늘어납니다(종횡비가 유지됨). 따라서 Full HD(1920 x 1080 픽셀) 해상도의 이미지를 권장합니다. 슬라이더가 전체 화면 높이를 차지하지 않게 하려면 슬라이더 설정에서 높이를 설정해야 합니다.

오버레이 이미지

이 옵션을 사용하여 기본 배경 이미지 위에 투명 또는 반투명 배경으로 추가 이미지를 오버레이합니다. 오버레이 이미지는 슬라이드의 전체 표면에 텍스처로 재현됩니다.

배경 애니메이션

배경 이미지에 애니메이션을 적용하려면 이 옵션을 선택하십시오. 활성화하면 다음 유형의 애니메이션을 사용할 수 있습니다.

  • 중앙 줌(기본값)
  • 왼쪽 상단에서 확대
  • 오른쪽 상단에서 확대
  • 왼쪽 하단에서 확대
  • 오른쪽 하단에서 확대

배경 비디오

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

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

슬라이드 속성

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

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

슬라이드 콘텐츠 스타일 사용자 지정

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

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

이러한 각 그룹에서 각 요소에 대한 글꼴, 색상, 크기 및 기타 스타일 옵션을 설정할 수 있습니다.

그래픽 및 SVG 그래픽

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

슬라이드의 버튼

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

  • 버튼 텍스트
  • 링크
  • 마우스 오버 시 애니메이션
  • 상

스크롤 시 슬라이드 애니메이션

이 섹션에서는 슬라이드의 전체 콘텐츠 또는 슬라이드의 개별 요소를 스크롤할 때 애니메이션을 켜고 끌 수 있습니다. 원한다면 (그리고 기술) 만들 수 있습니다 미세 조정 CSS 스타일이 있는 애니메이션.

슬라이드 저장

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

사이트에 고품질 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 비디오;
  • 유연한 설정;
  • 유용한 추가 기능;
  • 표시되는 콘텐츠의 무제한.

데모 |다운로드

와우 슬라이더

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는 치수에 따라 너비와 높이를 자동으로 조정합니다. 부모 요소. 이것은 간단한 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 슬라이더입니다.

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

데모 |다운로드

플렉스 슬라이더 2

최고의 반응성 슬라이더. 새 버전작업 속도, 소형화를 높이기 위해 완성되었습니다.

데모 | 다운로드

Galleria - 반응형 자바스크립트 사진 갤러리

Galleria는 수백만 개의 웹사이트에서 고품질 이미지 갤러리를 만드는 데 사용됩니다. 그녀의 작업에 대한 긍정적인 리뷰의 수는 다음과 같습니다.

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

데모 | 다운로드

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

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

배경 이미지 슬라이더를 만들 수 있는지 알려주실 수 있습니까? 매끄러운 도움슬라이더?
Google은 도움이 되지 않습니다(문서에는 이미지가 div 블록에 배치되어야 한다고 나와 있습니다. 하지만 배경 이미지?

@ 문자 집합 utf-8; html,본문,div,스팬,애플릿,개체,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,약어,주소,big,cite,코드,del,dfn, em,글꼴,img,ins,kbd,q,s,samp,작은, 스트라이크,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li, fieldset,form,label, legend,table,caption,tbody,tfoot,thead,tr,th,td(background: 없음 반복 스크롤 0 0 투명; 테두리: 0 없음; 글꼴 크기: 100%; 개요: 0 없음; 수직 정렬: 기준선; 여백: 0; 패딩: 0;) 테이블(테두리 축소: 축소; 테두리 간격: 0;) 주소, 기사, 옆으로, 캔버스, 세부 정보, 그림 캡션, 그림, 바닥글, 머리글, hgroup, nav, section,summary(display: block;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box; ) a, a:hover, 버튼, 버튼:hover, .anime ( -moz-transition:all 200ms 선형; -ms-transition:all 200ms 선형; -o-transition:all 200ms 선형; -webkit- F_COL_C-START_I-CENTER ( 디스플레이: flex; flex-flo w: 컬럼 nowrap; 정당화 내용: 플렉스 시작; 항목 정렬: 가운데; ) .F_ROW_C-START_I-CENTER ( 디스플레이: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; ) .F_ROW_C-S-B_I-F-S ( 디스플레이: flex; flex-flow : row nowrap; justify-content: space- between; align-items: flex-start; ).F_ROW_C-START_I-STRETCH ( display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items : stretch; ) body ( background-color: #fff; color: #413d4b; font-family:"Roboto", sans-serif; font-size: 0.87vmax; line-height: 1.37vmax; ) .wrap ( 너비: 58.75vw; 여백: 0 자동; 위치: 상대; ) 헤더( 너비: 100%; 높이: 100vh; background-image: linear-gradient(45deg, rgba(9, 5, 47, .85) 0%, rgba( 49, 29, 94, .85)), url(../img/bg_header.jpg); background-repeat: 반복 안함; background-size: 커버; background-position: center; overflow: hidden; ) #top_header ( display: flex; flex-flow: row nowrap; justify-content: space- between; align-items: center; margin-top: 3.2vh; ) #logo svg( height: 3vw; ) #top_header nav ul (디스플레이: 플렉스; flex-flow: row nowrap; ) nav li( list-style: none; text-transform: 대문자; color: #fff; font-family: "Roboto Black", sans-serif; margin-left: 1.25vw; ) nav a( text-decoration: none ; font-weight: bold; color: #fff; ) a:hover ( color: #00e0d0; ) #header_content ( margin-top: 24.4vh; ) #header_content h2( font-family: "Playfair Display", serif; color : #fff; 글꼴 크기: 2vw; 텍스트 정렬: 가운데; ) hr ( 테두리: 없음; 너비: 3. 12vw; 높이: 1px; 배경색: #00e0d0; 색상: #00e0d0; 여백 상단: 3.8vh; ) #header_content p ( 너비: 48.6vw; 색상: #fff; 줄 높이: 3.5vh; 텍스트 정렬: 가운데; 여백 상단: 4.17vh; ) .btn ( 패딩: 0.8vw 1.5vw; 글꼴 모음: "Hammersmith One", sans-serif, 글꼴 크기: 1vw, 색상: #00e0d0, 텍스트 변환: 대문자, 테두리: 1픽셀 솔리드 #00e0d0, 배경 색상: 투명, 테두리 반경: 2픽셀, 여백 상단: 7.3 vh; ) .btn:hover ( color: #fff; border: 1px solid #fff; ) #dot_nav( width: 3.43vw; display: flex; flex-flow: row nowrap; justify-content: space-between; align- 항목: flex-start; margin-top: 18.9vh; ) .circle_nav ( 너비: 0.62vw; 높이: 0.62vw; 테두리: 2px solid #bab9bc; 배경색: 투명; 테두리 반경: 0.62vw; ) .circle_nav :hover ( 테두리: 2px 솔리드 #00e0d0; 배경색: #00e0d0; ) <a href="https://bar812.ru/ko/gotovye-shablony-landing-page-deti-shablony-landing-page-curbitcy-elementor-wordpress.html">방문 페이지</a>

우리는 굉장한 크리에이티브 에이전시입니다

이것은 Lorem Ipsum의 Photoshop 버전입니다. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 모르비 아컴산 입숨 벨릿.

시간은 멈추지 않고 계속 진행됩니다. 이것은 인터넷에도 영향을 미쳤습니다. 당신은 이미 변화를 볼 수 있습니다 모습사이트, 특히 적응형 디자인은 매우 인기가 있습니다. 그리고 그 결과 많은 새로운 반응형 제이쿼리슬라이더, 갤러리, 회전 목마 또는 이와 유사한 플러그인.
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 썸네일 갤러리 슬라이더.

실험 슬라이더 갤러리 3D패널레이아웃메쉬와 흥미로운 효과애니메이션.

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 효과가 표시되는 Safari 브라우저용으로 제작되었습니다. 다른 브라우저에서 보면 기능은 괜찮지만 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="#" class="is-prev">« </아> <a href="#" class="is-next">» </아> </div> </div>

jQuery 부분

1 2 3 4 5 6 7 8 $("#immersive_slider" ) .immersive_slider (( animation: "fade" , slideSelector: ".slide" , container: ".main" , cssBlur: false , pagination: true , autoStart: 5000 ) ) ;

슬라이더 예제를 보면 알 수 있듯이 다양한 . 이러한 전환에 대한 모든 설정은 위의 기능에 있습니다. 다음 설정을 고려하십시오.

  • 생기- 슬라이드가 변경되는 방식을 결정하는 값입니다. "페이드", "슬라이드" 또는 "바운스" 값을 허용합니다. 그리고 슬라이드를 세로로 변경하려면 "slideUp" 또는 "bounceUp"을 등록해야 합니다.
  • 슬라이드 선택기- 슬라이드가 있는 블록을 선택하는 선택기.
  • 컨테이너— 이 속성은 배경이 변경될 기본 컨테이너를 정의합니다.
  • cssblur시험 기능입니다. 블러를 설정하지 않으려면 이 속성을 설정하지 마십시오.
  • 쪽수 매기기— 탐색을 활성화합니다.
  • 자동 시작— 슬라이드 쇼의 자동 시작.