데 화면의 전체 너비를 차지하는 웹 사이트, 우리는 판매용 제품의 전체 샘플 또는 여름에 제공 할 수있는 여행을 표시하는 데 유용 할 수있는 특정 요소를 통합 할 수 있습니다. 캐 러셀 또는 슬라이더는 제품을 매우 시선을 사로 잡는 방식으로 보여줄 수있는 웹 요소 중 하나입니다.
롯 CSS의 무료 슬라이더, 스크롤러 또는 캐 러셀 아래에서 찾을 수 있습니다. 예산을 수락하기 전에 고객에게 보여줄 모든 종류의 목표에 대한 좋은 레퍼토리를 구성하십시오. 수평 및 수직 형식의 약간의 JavaScript가있는 HTML 및 CSS의 슬라이더 모음입니다. 코드에 액세스하여 신속하게 구현할 수 있도록 해보겠습니다.
수평 캐 러셀
이 캐 러셀은 꽤 화려한 애니메이션 마치 커튼을 그리는 것처럼이 슬라이더에서 설정할 프로필의 사진과 아이콘을 축소합니다. 우리가 웹에서 판매하는 제품에 매우 만족하는 사용자의 평가를위한 완벽한 캐 러셀입니다.
반응 형 무한 캐 러셀
이 슬라이더는 가끔 볼 수있는 광고처럼 측면의 축구장에 가로로 스크롤되는 다양한 광고를 표시합니다. 브랜드 파트너 및 기타 유형의 로고를 표시해야하는 랜딩 페이지에 이상적입니다.
React Carousel
이 두루마리 React.js가 눈에.니다. 이는 연속 애니메이션에서 한 이미지에서 다른 이미지로 이동할 때 비례적인 크기로 이미지를 표시하는 데 적합합니다. 이 상당히 간단한 CSS에 대해 조금 더 말할 것이지만, 웹에 적절하게 배치하는 방법을 안다면 큰 효과가 있습니다.
부드러운 3D 슬라이더
HTML, CSS 및 JavaScript로 구성된이 3D 캐 러셀은 부드러움과 시각적 효과가 뛰어난 튀는 애니메이션. 각 카드를 식별하는 일련의 요소, 작업 및 눈길을 끄는 캐 러셀을 사용하여 웹 사이트에 통합합니다.
자동 무한 캐 러셀
자체 이름이 경고하는대로 자동으로 표시되는 슬라이더 사용자가 상호 작용할 필요없이 그와 시간에. 이 눈에 띄는 회전 목마를 구성하는 다양한 이미지는 마술처럼 희미 해지는 전환으로 인해 나타납니다.
마우스 오버 캐 러셀
호버 요소를 사용하면 슬라이더가 왼쪽에서 오른쪽으로 이동또는 그 반대의 경우 마우스 포인터를 그 위에 둡니다. 이 이미지 슬라이더를 구성 할 수있는 다른 사진 사이를 이동하는 부드러운 전환입니다.
모바일 캐 러셀
또한 Carousel Material Design이라는, 그리고 모든 종류의 카드가있는 현재의 트렌드로 여기에서 CSS / HTML로 된 많은 기사를 찾을 수 있습니다., Google에서 게시 한 디자인 언어로 구성되어 있기 때문에 나머지 부분과 거리가 있습니다. 카드를 길게 눌러 다른 카드를 이동할 수 있습니다.
Instagram 피드 캐 러셀
이 강조 슬라이더 뒤에있는 아이디어를 깨뜨릴 수 있습니다. 확대 할 수있는 이미지 스트립으로 그들 중 하나를 클릭하여. 특정 유형의 웹 사이트를 대상으로하지만 효과가 뛰어난 애니메이션입니다. slick.js 캐 러셀에 찍은 Instagram 게시물.
단순 동기화 캐 러셀
특히 이미지 스트립에서 이전 이미지와 많은 관련이 있지만 슬라이더와의 상호 작용은 매우 다릅니다 측면 제스처로 왼쪽에서 오른쪽으로 또는 그 반대로 이동합니다. 다시 우리는 slick.js가 그 일을하고 있습니다. 큰 효과로 눈에.니다.
3D 수평 캐 러셀
우리가 게시하는 전체 목록에서 가장 흥미로운 캐 러셀 중 하나입니다. 눈에 띄는 CSS 및 HTML의 수평 슬라이더 환상적으로 잘 움직입니다. 네 가지 변형으로 생성 할 수있는 다양한 효과를 찾으려면 상자 위에 마우스 포인터를두기 만하면됩니다.
CSS 캐 러셀
간단하고 훌륭한 시각 효과 차례대로 진행되는 일련의 카드 전면에. 이 효과는 3D이므로 특히 제작자의 천재성을 보여주는 최소 반발 효과로 인해 많은 관심을 끄는 슬라이더 중 하나입니다.
Ambilight 부트 스트랩 캐 러셀
그다지 눈에 띄지 않는 효과가 큰 간단한 슬라이더입니다. 중 하나이다 그 간단한 슬라이더 팡파르가별로없는듯한 느낌을 주지만 그 기능은 완벽하게 충족합니다.
캐 러셀 팀
블로그에있는 편집 팀을 소개하고 싶다면 이 슬라이더는 그 역할이 완벽합니다. 얼마나 간단한 지 이전 것과 비슷합니다. 각 팀의 사진을 보관하기 위해 다이아몬드를 사용하는 것이 두드러집니다. 자동 재생 기능이 있습니다.
캐 러셀 큐브
큐브로 눈에 띄는 슬라이더 각 얼굴은 이미지 중 하나입니다 또는 웹 사이트에 표시하고 싶은 사진. 스크롤하고 어떤 콘텐츠가 당신을 기다리고 있는지 확인하기 위해 각각을 클릭하기 만하면됩니다.
캐 러셀 화살표 키
상호 작용이 진행되는 슬라이더 화살표 키 사용. 몇 년 전처럼 보이는 다른 유형의 상호 작용으로 직접 이동하는 팡파르없이 간단합니다. 특정 용도를 위해.
수직 캐 러셀
시각적 효과가 뛰어난 슬라이더 연속 수직 애니메이션으로 자동 재생 모서리가 둥근 카드가 눈에 띕니다. 매우 최신이며이 전체 목록에서 그 자체로 눈에 띄는 것 중 하나입니다.
순수 CSS 캐 러셀
이 캐 러셀은 우리가 갈 수있는 사이드 메뉴 각 옵션을 클릭합니다. 정보는 말한 것 이상없이 잘 달성 된 반동 효과로 나타납니다.
수직 캐 러셀 반응
비슷한 수직 성 이전,이 슬라이더는 페이지의 전체 너비를 사용하여 각 탭의 이미지를 표시 할 수 있습니다. 큰 형식과 CSS 전환을 사용하여 슬라이드 사이를 슬라이드하는 것이 흥미 롭습니다.
3D 분할 캐 러셀
3D로 회전하는 슬라이더 패턴으로 뛰어난 시각 효과 매우 인상적인 애니메이션. 각 옵션에 대해 점이있는 왼쪽 메뉴에서 각 옵션을 선택할 수 있습니다. 얼마나 창의적인지 목록에서 최고 중 하나입니다.
좋은 아침입니다. 내 사이트에서 Pure CSS Carousel을 사용하고 싶지만 한 위치에만 있습니다. 내 페이지 내에서 원하는 위치에 배치하려면 어떻게해야합니까?
이걸 도와주세요 정말 감사합니다
내 웹 사이트의 모바일 버전에서 Hover Carousel이 제대로 표시되도록하려면 어떻게해야합니까?
훌륭합니다. 그들은 정말 잘했습니다!
안녕하세요, 캐리지 하우스는 매우 멋지지만 업로드하자마자 복사하여 붙여 넣으면 var max = $ ( '# c> li) .lenght… 때문에 javascrip에서 오류가 발생합니다. 당신은 무엇을 제안합니까