jquery 슬라이드 플러그인 bxslider 스타일 개선 example

jquery 슬라이드 플러그인 bxslider 스타일 개선 example_jquery

WBOY

풀어 주다： 2016-05-16 16:33:56

원래의

1350명이 탐색했습니다.

이 문서의 예에서는 jquery 슬라이드쇼 플러그인 bxslider의 스타일을 개선하는 방법을 설명하고 참조용으로 모든 사람과 공유합니다. 세부 내용은 다음과 같습니다.

여러 jquery 슬라이드를 비교한 결과 별로 좋지 않다는 것을 알았습니다. 마지막으로 bxslider가 호환성이 가장 좋고 모바일 장치에서 수동 뒤집기를 지원한다는 것을 알았습니다.

그런데 공식적인 디스플레이 효과는 정말 추악하고 용납할 수 없습니다. 결국 제가 직접 DIY를 하게 되었습니다.

bxslider의 공식 스타일은 다음과 같습니다.

수정된 스타일은 다음과 같습니다.

1단계: bxslider 소개

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

2단계: bxslider HTML 코드 추가

코드 복사

코드는 다음과 같습니다.

> > ~

~ > ~ ~ ~ ~ >

원래 공식 HTML 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. #slider_block{위치: 상대;여백: 0 자동;높이: 245px;margin-top:10px;overflow:hidden;} #slider-pager{위치: 절대;하단: 10px;오른쪽: 10px;z-색인: 999;글꼴 크기: 0px;} #slider-pager .pager-link {float: 왼쪽;너비: 15px;높이: 15px;줄 높이: 15px;텍스트 정렬: 센터;여백: 0 0 0 10px;배경: #FC0;색상: #930; } #slider-pager .active {배경: #0C3;색상: #fff;}

/*그림자 효과 제거, 브라우저는 4jcms와 호환되지 않습니다 */
/*.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc
-webkit-box-shadow: 0 0 5px #ccc
상자 그림자: 0 0 5px #ccc
테두리: 단색 #fff 5px
왼쪽: -5px
배경: #fff
}

*/
#slider_block{위치: 상대;여백: 0 자동;높이: 245px;margin-top:10px;overflow:hidden;}
#slider-pager{위치: 절대;하단: 10px;오른쪽: 10px;z-색인: 999;글꼴 크기: 0px;}
#slider-pager .pager-link {float: 왼쪽;너비: 15px;높이: 15px;줄 높이: 15px;텍스트 정렬: 센터;여백: 0 0 0 10px;배경: #FC0;색상: #930; }
#slider-pager .active {배경: #0C3;색상: #fff;}

/*그림자 효과 제거, 브라우저는 4jcms와 호환되지 않습니다. */
/*.bx-래퍼 .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
상자 그림자: 0 0 5px #ccc; 테두리: 단색 #fff 5px;

왼쪽: -5px;
배경: #fff;
}
*/

최종 리노베이션 완료