swiper

집

웹 프론트엔드

JS 튜토리얼

스와이프 플러그인 소개 및 이미지 캐러셀 방법

PHP中文网

Jun 19, 2017 pm 05:23 PM

swiper 어떻게 플러그인 소개

swiper

Swiper는 순수 JavaScript로 제작된 슬라이딩 특수 효과 플러그인으로 휴대폰, 태블릿 및 기타 모바일 단말기를 지향합니다.

Swiper는 터치스크린 초점 이미지, 터치스크린 탭 전환, 터치스크린 다중 이미지 전환 등과 같은 일반적인 효과를 얻을 수 있습니다.

Swiper는 무료이며 안정적이고 사용이 간편하며 강력한 오픈 소스입니다. 모바일 터미널 웹사이트를 구축하는 데 중요한 선택입니다!

1. 먼저 swiper 운영 환경을 만들어주세요. swiper.min.js, swiper.min.css 파일이 필요합니다.

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

로그인 후 복사

　　<script src="path/to/swiper.min.js?1.1.10"></script>

로그인 후 복사

</html>

로그인 후 복사

2. HTML 콘텐츠를 작성합니다.

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">Slide 1</div>
　　　　<div class="swiper-slide">Slide 2</div>
　　　　<div class="swiper-slide">Slide 3</div>
　　</div>

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

로그인 후 복사

3. Swiper의 크기를 정의하고 싶을 수도 있지만 물론 그렇지 않습니다.

.swiper-container {
　　width: 600px;
　　height: 300px;
}

로그인 후 복사

4. Swiper 초기화: 태그 옆에 있는 것이 가장 좋습니다(함수 호출)

<script>

로그인 후 복사

　　var swiper=new Swiper('.swiper-container',{
　　　autoplay:1000, // 자동 캐러셀
　　 autoplayDisableOnInteraction:false,//슬라이딩 후 계속 스크롤
　　　　loop:true,///Loop
　　　　pagination:'.swiper-pagination',////Pagination
　　　paginationClick 가능:true,////작은 점 click
　　spaceBetween: 30 ,//사진 간격
　　　방향: "가로"//기본 가로 세로
　　})

</script>
</body>

로그인 후 복사

위 내용은 스와이프 플러그인 소개 및 이미지 캐러셀 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7724

자바 튜토리얼

1643

Cakephp 튜토리얼

1396

라라벨 튜토리얼

1290

PHP 튜토리얼

1233

Related knowledge

PyCharm 초보자 가이드: 플러그인 설치에 대한 전반적인 이해! Feb 25, 2024 pm 11:57 PM

PyCharm은 개발자가 코드를 보다 효율적으로 작성할 수 있도록 다양한 기능과 도구를 제공하는 강력하고 인기 있는 Python 통합 개발 환경(IDE)입니다. PyCharm의 플러그인 메커니즘은 기능을 확장하기 위한 강력한 도구입니다. 다양한 플러그인을 설치하면 PyCharm에 다양한 기능과 사용자 정의 기능을 추가할 수 있습니다. 따라서 PyCharm을 처음 접하는 사람이 플러그인을 이해하고 능숙하게 설치하는 것이 중요합니다. 이 문서에서는 PyCharm 플러그인의 전체 설치에 대해 자세히 소개합니다.

Edge 브라우저가 이 플러그인을 지원하지 않는 이유에 대한 세 가지 해결 방법을 공유하세요. Mar 13, 2024 pm 04:34 PM

사용자가 Edge 브라우저를 사용할 때 더 많은 요구 사항을 충족하기 위해 일부 플러그인을 추가할 수 있습니다. 그런데 플러그인을 추가하면 해당 플러그인이 지원되지 않는다고 표시됩니다. 이 문제를 해결하는 방법은 무엇입니까? 오늘은 에디터가 세 가지 해결 방법을 알려드리겠습니다. 방법 1: 다른 브라우저를 사용해 보세요. 방법 2: 브라우저의 Flash Player가 오래되었거나 누락되어 플러그인이 지원되지 않을 수 있습니다. 공식 웹사이트에서 최신 버전을 다운로드할 수 있습니다. 방법 3: "Ctrl+Shift+Delete" 키를 동시에 누르세요. "데이터 지우기"를 클릭하고 브라우저를 다시 엽니다.

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Mar 08, 2024 am 08:55 AM

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? 일반적인 상황에서 Chrome 플러그인 확장의 기본 설치 디렉터리는 다음과 같습니다. 1. windowsxp에서 Chrome 플러그인의 기본 설치 디렉터리 위치: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Windows7의 Default\Extensions2.chrome 플러그인의 기본 설치 디렉터리 위치: C:\Users\username\AppData\Local\Google\Chrome\User

Python ORM 성능 벤치마크: 다양한 ORM 프레임워크 비교 Mar 18, 2024 am 09:10 AM

ORM(객체 관계형 매핑) 프레임워크는 Python 개발에서 중요한 역할을 하며, 객체와 관계형 데이터베이스 사이에 브리지를 구축하여 데이터 액세스 및 관리를 단순화합니다. 다양한 ORM 프레임워크의 성능을 평가하기 위해 이 기사에서는 다음과 같은 널리 사용되는 프레임워크를 벤치마킹합니다. sqlAlchemyPeeweeDjangoORMPonyORMTortoiseORM 테스트 방법 벤치마크에서는 100만 개의 레코드가 포함된 SQLite 데이터베이스를 사용합니다. 테스트는 데이터베이스에서 다음 작업을 수행했습니다. 삽입: 테이블에 10,000개의 새 레코드를 삽입합니다. 읽기: 테이블의 모든 레코드를 읽습니다. 업데이트: 테이블의 모든 레코드에 대해 단일 필드를 업데이트합니다. 삭제: 테이블의 모든 레코드를 삭제합니다. 각 작업

나이키 신발의 정품과 가짜 신발 상자를 식별하는 방법(쉽게 식별하는 하나의 트릭 마스터) Sep 02, 2024 pm 04:11 PM

세계적인 스포츠 브랜드로서 나이키의 신발은 많은 주목을 받았다. 그러나 가짜 Nike 신발 상자를 포함하여 시중에는 수많은 위조 제품도 있습니다. 정품 신발 상자와 가짜 신발 상자를 구별하는 것은 소비자의 권익을 보호하는 데 중요합니다. 이 글에서는 진짜 신발 상자와 가짜 신발 상자를 구별하는 데 도움이 되는 몇 가지 간단하고 효과적인 방법을 제공합니다. 1: 외부 포장 제목 Nike 신발 상자의 외부 포장을 관찰하면 미묘한 차이가 많이 있음을 알 수 있습니다. 정품 Nike 신발 상자는 일반적으로 촉감이 부드럽고 뚜렷한 매운 냄새가 없는 고품질 종이 재질로 되어 있습니다. 정품 신발 상자의 글꼴과 로고는 일반적으로 명확하고 상세하며 흐릿하거나 색상 불일치가 없습니다. 2: 나이키 신발 상자의 로고 핫 스탬핑 제목은 일반적으로 정품 신발 상자의 핫 스탬핑 부분입니다.

빅데이터 프로젝트에 Python ORM 적용 Mar 18, 2024 am 09:19 AM

ORM(객체 관계형 매핑)은 개발자가 SQL 쿼리를 직접 작성하지 않고도 객체 프로그래밍 언어를 사용하여 데이터베이스를 조작할 수 있도록 하는 프로그래밍 기술입니다. Python의 ORM 도구(예: SQLAlchemy, Peewee 및 DjangoORM)는 빅 데이터 프로젝트의 데이터베이스 상호 작용을 단순화합니다. 장점 코드 단순성: ORM을 사용하면 긴 SQL 쿼리를 작성할 필요가 없으므로 코드 단순성과 가독성이 향상됩니다. 데이터 추상화: ORM은 데이터베이스 구현 세부 사항에서 애플리케이션 코드를 분리하여 유연성을 향상시키는 추상화 계층을 제공합니다. 성능 최적화: ORM은 캐싱 및 일괄 작업을 사용하여 데이터베이스 쿼리를 최적화함으로써 성능을 향상시키는 경우가 많습니다. 이식성: ORM을 통해 개발자는 다음을 수행할 수 있습니다.

Google Chrome에서 애니메이션 플러그인 실행을 허용하는 방법 Mar 28, 2024 am 08:01 AM

Google 크롬에서는 애니메이션 플러그인 실행을 어떻게 허용하나요? Chrome은 매우 강력합니다. 많은 친구들이 동영상 애니메이션을 보기 위해 이 브라우저를 사용하고 싶어합니다. 그러나 다양한 애니메이션 동영상을 보려면 브라우저에 애니메이션 플러그인을 설치해야 합니다. 애니메이션 플러그인을 사용하는데도 여전히 비디오에 신경 쓸 수 없습니다. 이 문제를 어떻게 처리해야 합니까? 다음으로, 애니메이션 플러그인이 Google Chrome에서 실행되도록 허용하는 구체적인 단계를 편집자가 보여드리겠습니다. 관심 있는 친구가 와서 살펴볼 수 있습니다. 애니메이션 플러그인 실행을 허용하는 Google Chrome의 구체적인 단계: 1. 먼저 컴퓨터에서 Google Chrome을 실행하고 홈페이지 오른쪽 상단에 있는 기본 메뉴 버튼을 클릭합니다(그림 참조). 2. 메인 메뉴를 연 후 아래의 "설정" 옵션을 선택하세요(그림 참조). 3. 설정에서

SQL 파일을 보고 편집하는 방법 Feb 26, 2024 pm 05:12 PM

SQL 파일은 일반적으로 일련의 SQL 문을 포함하는 텍스트 파일입니다. SQL 파일을 열려면 텍스트 편집기나 특수 SQL 개발 도구를 사용할 수 있습니다. SQL 파일을 여는 가장 쉬운 방법은 Windows의 메모장이나 Notepad++, Mac의 텍스트 편집기와 같은 텍스트 편집기를 사용하는 것입니다. SQL 파일을 여는 단계는 다음과 같습니다. 먼저 열려는 SQL 파일을 찾아 해당 파일을 마우스 오른쪽 버튼으로 클릭한 다음 "연결 프로그램"을 선택합니다. 팝업창에서

See all articles

스와이프 플러그인 소개 및 이미지 캐러셀 방법

swiper

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제