웹 사이트를위한 19 개의 슬라이더 또는 캐 러셀 CSS 및 HTML

무료 슬라이더

화면의 전체 너비를 차지하는 웹 사이트, 우리는 판매용 제품의 전체 샘플 또는 여름에 제공 할 수있는 여행을 표시하는 데 유용 할 수있는 특정 요소를 통합 할 수 있습니다. 캐 러셀 또는 슬라이더는 제품을 매우 시선을 사로 잡는 방식으로 보여줄 수있는 웹 요소 중 하나입니다.

CSS의 무료 슬라이더, 스크롤러 또는 캐 러셀 아래에서 찾을 수 있습니다. 예산을 수락하기 전에 고객에게 보여줄 모든 종류의 목표에 대한 좋은 레퍼토리를 구성하십시오. 수평 및 수직 형식의 약간의 JavaScript가있는 HTML 및 CSS의 슬라이더 모음입니다. 코드에 액세스하여 신속하게 구현할 수 있도록 해보겠습니다.

수평 캐 러셀

반응형 (Responsive)

이 캐 러셀은 꽤 화려한 애니메이션 마치 커튼을 그리는 것처럼이 슬라이더에서 설정할 프로필의 사진과 아이콘을 축소합니다. 우리가 웹에서 판매하는 제품에 매우 만족하는 사용자의 평가를위한 완벽한 캐 러셀입니다.

관련 기사 :
웹 사이트에 특별한 느낌을주는 27 개의 HTML 및 CSS 슬라이더

반응 형 무한 캐 러셀

자기 번식

이 슬라이더는 가끔 볼 수있는 광고처럼 측면의 축구장에 가로로 스크롤되는 다양한 광고를 표시합니다. 브랜드 파트너 및 기타 유형의 로고를 표시해야하는 랜딩 페이지에 이상적입니다.

React Carousel

3D 캐 러셀

이 두루마리 React.js가 눈에.니다. 이는 연속 애니메이션에서 한 이미지에서 다른 이미지로 이동할 때 비례적인 크기로 이미지를 표시하는 데 적합합니다. 이 상당히 간단한 CSS에 대해 조금 더 말할 것이지만, 웹에 적절하게 배치하는 방법을 안다면 큰 효과가 있습니다.

부드러운 3D 슬라이더

3D 캐 러셀

HTML, CSS 및 JavaScript로 구성된이 3D 캐 러셀은 부드러움과 시각적 효과가 뛰어난 튀는 애니메이션. 각 카드를 식별하는 일련의 요소, 작업 및 눈길을 끄는 캐 러셀을 사용하여 웹 사이트에 통합합니다.

관련 기사 :
46 자바 스크립트 슬라이더 및 스크롤러

자동 무한 캐 러셀

무한 캐 러셀

자체 이름이 경고하는대로 자동으로 표시되는 슬라이더 사용자가 상호 작용할 필요없이 그와 시간에. 이 눈에 띄는 회전 목마를 구성하는 다양한 이미지는 마술처럼 희미 해지는 전환으로 인해 나타납니다.

마우스 오버 캐 러셀

마우스 오버 캐 러셀

호버 요소를 사용하면 슬라이더가 왼쪽에서 오른쪽으로 이동또는 그 반대의 경우 마우스 포인터를 그 위에 둡니다. 이 이미지 슬라이더를 구성 할 수있는 다른 사진 사이를 이동하는 부드러운 전환입니다.

모바일 캐 러셀

모바일 캐 러셀

또한 Carousel Material Design이라는, 그리고 모든 종류의 카드가있는 현재의 트렌드로 여기에서 CSS / HTML로 된 많은 기사를 찾을 수 있습니다., Google에서 게시 한 디자인 언어로 구성되어 있기 때문에 나머지 부분과 거리가 있습니다. 카드를 길게 눌러 다른 카드를 이동할 수 있습니다.

Instagram 피드 캐 러셀

인스타그램

이 강조 슬라이더 뒤에있는 아이디어를 깨뜨릴 수 있습니다. 확대 할 수있는 이미지 스트립으로 그들 중 하나를 클릭하여. 특정 유형의 웹 사이트를 대상으로하지만 효과가 뛰어난 애니메이션입니다. slick.js 캐 러셀에 찍은 Instagram 게시물.

단순 동기화 캐 러셀

단순 캐 러셀

특히 이미지 스트립에서 이전 이미지와 많은 관련이 있지만 슬라이더와의 상호 작용은 매우 다릅니다 측면 제스처로 왼쪽에서 오른쪽으로 또는 그 반대로 이동합니다. 다시 우리는 slick.js가 그 일을하고 있습니다. 큰 효과로 눈에.니다.

3D 수평 캐 러셀

3D 수평 캐 러셀

우리가 게시하는 전체 목록에서 가장 흥미로운 캐 러셀 중 하나입니다. 눈에 띄는 CSS 및 HTML의 수평 슬라이더 환상적으로 잘 움직입니다. 네 가지 변형으로 생성 할 수있는 다양한 효과를 찾으려면 상자 위에 마우스 포인터를두기 만하면됩니다.

CSS 캐 러셀

CSS 3D

간단하고 훌륭한 시각 효과 차례대로 진행되는 일련의 카드 전면에. 이 효과는 3D이므로 특히 제작자의 천재성을 보여주는 최소 반발 효과로 인해 많은 관심을 끄는 슬라이더 중 하나입니다.

Ambilight 부트 스트랩 캐 러셀

부트 스트랩 캐 러셀

그다지 눈에 띄지 않는 효과가 큰 간단한 슬라이더입니다. 중 하나이다 그 간단한 슬라이더 팡파르가별로없는듯한 느낌을 주지만 그 기능은 완벽하게 충족합니다.

캐 러셀 팀

캐 러셀 팀

블로그에있는 편집 팀을 소개하고 싶다면 이 슬라이더는 그 역할이 완벽합니다. 얼마나 간단한 지 이전 것과 비슷합니다. 각 팀의 사진을 보관하기 위해 다이아몬드를 사용하는 것이 두드러집니다. 자동 재생 기능이 있습니다.

캐 러셀 큐브

3d 큐브

큐브로 눈에 띄는 슬라이더 각 얼굴은 이미지 중 하나입니다 또는 웹 사이트에 표시하고 싶은 사진. 스크롤하고 어떤 콘텐츠가 당신을 기다리고 있는지 확인하기 위해 각각을 클릭하기 만하면됩니다.

캐 러셀 화살표 키

CSS 키

상호 작용이 진행되는 슬라이더 화살표 키 사용. 몇 년 전처럼 보이는 다른 유형의 상호 작용으로 직접 이동하는 팡파르없이 간단합니다. 특정 용도를 위해.

수직 캐 러셀

수직 캐 러셀

시각적 효과가 뛰어난 슬라이더 연속 수직 애니메이션으로 자동 재생 모서리가 둥근 카드가 눈에 띕니다. 매우 최신이며이 전체 목록에서 그 자체로 눈에 띄는 것 중 하나입니다.

순수 CSS 캐 러셀

회전 목마

이 캐 러셀은 우리가 갈 수있는 사이드 메뉴 각 옵션을 클릭합니다. 정보는 말한 것 이상없이 잘 달성 된 반동 효과로 나타납니다.

수직 캐 러셀 반응

회전 목마

비슷한 수직 성 이전,이 슬라이더는 페이지의 전체 너비를 사용하여 각 탭의 이미지를 표시 할 수 있습니다. 큰 형식과 CSS 전환을 사용하여 슬라이드 사이를 슬라이드하는 것이 흥미 롭습니다.

3D 분할 캐 러셀

스플릿

3D로 회전하는 슬라이더 패턴으로 뛰어난 시각 효과 매우 인상적인 애니메이션. 각 옵션에 대해 점이있는 왼쪽 메뉴에서 각 옵션을 선택할 수 있습니다. 얼마나 창의적인지 목록에서 최고 중 하나입니다.


기사의 내용은 우리의 원칙을 준수합니다. 편집 윤리. 오류를보고하려면 여기에.

4 코멘트, 당신의 것을 남겨주세요

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.

  1.   마이라 오렐라나

    좋은 아침입니다. 내 사이트에서 Pure CSS Carousel을 사용하고 싶지만 한 위치에만 있습니다. 내 페이지 내에서 원하는 위치에 배치하려면 어떻게해야합니까?

    이걸 도와주세요 정말 감사합니다

  2.   자비에르 카니자레스

    내 웹 사이트의 모바일 버전에서 Hover Carousel이 제대로 표시되도록하려면 어떻게해야합니까?

  3.   가브리엘

    훌륭합니다. 그들은 정말 잘했습니다!

  4.   토니 잠브라노

    안녕하세요, 캐리지 하우스는 매우 멋지지만 업로드하자마자 복사하여 붙여 넣으면 var max = $ ( '# c> li) .lenght… 때문에 javascrip에서 오류가 발생합니다. 당신은 무엇을 제안합니까