EasySlider는 jQuery_jquery를 기반으로 하는 강력하고 사용하기 쉬운 슬라이딩 도어 플러그인입니다.

Easy Slider는 클릭 시 이미지나 콘텐츠가 수평 또는 수직으로 슬라이드되도록 지원하는 슬라이딩 도어 플러그인입니다. 여기에는 풍부한 매개변수 설정 세트가 있으며 CSS를 통해 완전히 제어할 수 있습니다. 따라서 기본적으로 플러그인 파일을 링크하고 콘텐츠를 설정한 다음 CSS 스타일을 지정하기만 하면 됩니다.

EasySlider 기능
가로 또는 세로 슬라이딩 지원
자동 스크롤 지원
연속 슬라이딩 지원
"이전 화면" 및 "다음 화면" 화면 버튼"
"첫 번째 화면으로 이동" 및 "마지막 화면" 버튼
숨겨진 컨트롤
옵션 컨트롤 버튼 서라운드 마커
동일한 페이지에서 여러 개의 슬라이딩 도어 지원 가능
예 슬라이딩 속도, 자동 여부, 일시 정지 간격 등

EasySlider 사용 방법

1. 첫 번째는 html 태그입니다

코드 복사 코드는 다음과 같습니다.

🎜>

• 콘텐츠는 여기에...


• 콘텐츠는 여기에...


• 콘텐츠는 여기에 있습니다. ..

...

이전< ;/span>
다음 🎜>

참고: 각 li의 콘텐츠는 슬라이딩 레이어이며 아래 범위는 슬라이딩 탐색에 사용됩니다.

2. 그런 다음 jquery 라이브러리 및 EasySlider 플러그인을 호출합니다.

코드를 복사합니다.

참고:

앞에 배치하세요. 3. 초기화 플러그인 코드

코드 복사 코드는 다음과 같습니다.

참고: 위 코드 아래에 배치하세요. , 여기서 #sidebar는 HTML 태그의 div 요소에 해당합니다. CSS 선택기는 스크립트가 이 레이어에 적용되어야 함을 나타냅니다. 클래스 이름을 사용할 수도 있으므로 여기에
$(".list와 같이 작성됩니다. ").

.easyslider에는 많은 매개변수가 있습니다. 자세한 내용은 작성자의 원본 텍스트를 참조하세요.

4. CSS 스타일 정의


코드 복사

코드는 다음과 같습니다. #slider ul, #slider li{ margin:0

padding:0; -style:none >}

#slider, #slider li{
width:500px;
height:200px;
overflow:hidden
}span#prevBtn {}
span# nextBtn{}


참고: 필요에 따라 스타일을 지정하세요.
괜찮습니다.


EasySlider 데모 시연

기본 설정(왼쪽 및 오른쪽 뒤집기만 해당)

기본 설정(다음은 디지털 페이지)