SlidesJS 기본 사용 방법 및 공식 문서 설명 [Jquery 슬라이드 플러그 인 Jquery 앨범 플러그 인]
Slides – 간단 하고 맞 춤 형 이 며 스타일 화 되 기 쉬 운 jQuery 슬라이드 플러그 인 입 니 다.
Slides 는 탈색 이나 슬라이드 과도 효 과 를 제공 합 니 다. 이미지 페이드아웃, 이미지 프 리 스트레스, 페이지 자동 생 성, 순환, 자동 재생 사용자 정의 등 여러 옵션 을 제공 합 니 다.
슬라이드 플러그 인 을 사용 하면 슬라이드 를 무 작위 로 재생 할 수 있 습 니 다. 슬라이드 를 시작 하려 는 세트 를 설정 할 수 있 습 니 다.그것 은 충분 한 설명 과 예 시 를 첨부 한다.
DEMO 주소:http://slidesjs.com/
홈 페이지 주소:http://slidesjs.com/
다운로드 주소:http://slidesjs.com/downloads/slides.zip
기본 HTML 구조
<div id="slides">
<div class="slides_container">
<div>
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h1>Slide 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
기본 CSS 코드
<style type="text/css" media="screen">
.slides_container {
width:470px;
height:170px;
}
.slides_container div {
width:470px;
height:170px;
display:block;
}
</style>
기본 적 인 자 바스 크 립 트 코드 초기 화
<script>
$(function(){
$("#slides").slides();
});
</script>
공식 문서 해석 (버 전 1.1.9)
preload(boolean)
매개 변수 설정
true 앨범 에 있 는 사진 을 불 러 오 는 과정 에서
로 딩 그림 보이 기
false
보이 지 않 음 그림 불 러 오기
기본 값 은:
false
preloadImage(string)
이 속성 은 보통 하 나 를 따라 갑 니 다.
preload(boolean) 같이 사용 하면 string 안의 값 은 표시 해 야 할 것 을 표시 합 니 다.
그림 의 를 불 러 옵 니 다
경로 주소
기본 값 은:
"/img/loading.gif"
container(string)
그림 층 의 최상 위 div 설정
스타일 이름
기본 값 은:
"slides_container"
generateNextPrev(boolean)
자동 생 성 여부 설정
이전 다음 버튼
기본 값 은:
false
next(string)
자동 생 성의
다음 단추 스타일 이름
기본 값 은:
"next"
prev(string)
자동 생 성의
이전 단추 스타일 이름
기본 값 은:
"prev"
pagination(boolean)
그림 을 페이지 별로 표시 하지 않 으 면 설정 할 수 있 습 니 다.
false, 하지만 필요 없습니다. 설정 하지 않 는 것 을 추천 합 니 다.
$(function(){
$("#slides").slides({
preload: true
});
});
generatePagination(boolean)
자동 생 성 여부 설정
페이지 탐색 계층
기본 값 은:
true
paginationClass(string)
설치 하 다.
페이지 탐색 층 의
스타일 이름
기본 값 은:
"pagination"
currentClass(string)
페이지 탐색 층 설정 중
현재 페이지 항목 의
스타일 이름
기본 값 은:
"current"
계속...
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bootstrap DateTimepicker 예제이 기사에서는 예를 들어 부트스트랩 날짜 시간 선택기를 구현하는 방법을 살펴보겠습니다. 부트스트랩 4 날짜 시간 선택기는 html, php 또는 모든 laravel 파일에서 날짜와 시간을 표시하는 데 사용됩니다. 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.