일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- mysql 사용자 생성
- mysql database truncate
- mysql auto repair
- docker 설치
- galera cluster 재시작
- mariadb 모든 데이터 삭제
- mysql table 손상
- centos mount
- 서버 재시작시 mount
- 쿠키 하루
- mysql 자동복구
- mysql galera cluster
- cookie 하루 저장
- elasticsearch mapping생성
- mysqlcheck
- linux mount 방법
- mysql 모든 데이터 삭제
- mysql 검사
- mysql DB권한
- mysql all table truncate
- mysql yum 설치
- 쿠키 하루 저장
- 쿠키 오늘
- mariadb all table truncate
- mysql 손상
- mysql recovery
- mysql database 검사
- mysql yum install
- cookie today
- mariadb galera cluster
- Today
- Total
IT
BXSLIDER.JS 정리 본문
bxSlider.js 정보
공식홈페이지 : https://bxslider.com/
기본 예제.
-HTML
<ul class="bxslider">
<li><img src="images/img01.jpg" /></li>
<li><img src="images/img02.jpg" /></li>
<li><img src="images/img03.jpg" /></li>
</ul>
-슬라이더 적용방법
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pager:true, });
아래와 같은 방식으로 slider에 대한 옵션값 설정 및 적용
==================================================================================
~.jsp
<div class="main-thumb-section hide-controls bxslider-in genrePopScript" data-width="186"
data-min="6" data-max="6" data-margin="16.5" data-pager="true" data-controls="true" data-loop="true"> //슬라이더 dom
<li>~~~~~~<li>
해당페이지.js
bxsliderInV5("genrePopScript"); //호출시에는 해당 Element에만적용
bxsliderInV5(); //이와 같이 사용시에는 bxslider-in class를 찾아 전체 적용
현재 프로젝트는 아래와 같이 적용중
bxsliderInV5 : function(element, callback) {
var me = commonScript;
if(!element){
$('.bxslider-in').each(function(index, ele){
var isNoslide = ($(ele).data("noslide")) ? $(this).data("noslide") : false;
if(!isNoslide || isTemplateRender(ele)){
return bxsliderV5(ele, callback);
}
});
}
else{
bxsliderV5(element, callback);
}
function isTemplateRender(ele){ // handlbars 처리완료여부 확인
if($(ele).children() && $(ele).children().length > 0){
var tpldefine = $($(ele).children()[0]).attr('type');
if(tpldefine && tpldefine.indexOf('template') > -1){
return false;
}
else{
return true;
}
}
return false;
}
function bxsliderV5(element, callback){
var tmpSlider;
$(element).each(function () {
if($(this).hasClass("tving-cahtbot-template")){
return;
}
var sts = $(this);
var pager = ($(this).data("pager")) ? true : false;
var controls = ($(this).data("controls")) ? true : false;
var auto = ($(this).data("auto")) ? true : false;
var pagerType = ($(this).data("pagertype")) ? "short" : "full";
var caption = ($(this).data("caption")) ? true : false;
var loop = ($(this).data("loop")) ? $(this).data("loop") : false;
var swidth = ($(this).data("width")) ? $(this).data("width") : 0;
var minslide = ($(this).data("min")) ? $(this).data("min") : 1;
var maxslide = ($(this).data("max")) ? $(this).data("max") : 1;
var slidemg = ($(this).data("margin")) ? $(this).data("margin") : 0;
var mode = ($(this).data("mode")) ? $(this).data("mode") : "horizontal";
var isForce = ($(this).data("force")) ? $(this).data("force") : false;
var isNoslide = ($(this).data("noslide")) ? $(this).data("noslide") : false;
var moveSlides = ($(this).data("moveslides")) ? $(this).data("moveslides") : 0;
var bxslider = ($(this).hasClass("bxslider")) ? this : $(this).find(".bxslider");
var itemLength = $(bxslider).children().length;
if(isTemplateRender(this) && !isNoslide && (isForce || (itemLength > 0)) ) {
if(itemLength <= minslide){ // 정책반영
pager = false;
controls = false;
loop = false;
}
var _this = this;
tmpSlider = $(bxslider).bxSlider({
infiniteLoop : loop, // 전체 동일정책 반영
controls: controls,
auto : auto,
pager : pager,
pagerType : pagerType,
captions : caption,
slideWidth : swidth,
minSlides : minslide,
maxSlides : maxslide,
slideMargin : slidemg,
auto : auto,
autoControls : auto,
autoHover : auto,
hideControlOnEnd : true,
touchEnabled : (navigator.maxTouchPoints > 0), //IE에서 드래그시 클릭되는 이슈로 인하여 설정
mode : mode,
moveSlides : moveSlides,
onSliderLoad : function(currentIndex){
if(callback){
callback(this);
}
$(".keyvisual-slider").on("click", ".bx-prev, .bx-next", function(e) {
if(auto == true) {
tmpSlider.stopAuto();
setTimeout(function() {
tmpSlider.startAuto();
},200)
}
});
},
onSlideAfter : function(element) {
if(callback && callback.name == "callbackFunction") {
callback(element);
}
}
});
$(_this).attr("data-noslide", "true");
}
});
return tmpSlider;
}
},
==================================================================================
현재 사용하고 있는 대부분의 옵션과 실제 설정값.
pager: true// 현재 슬라이드 위치 표시
auto: true // 자동재생
controls : true //좌우버튼 보이기
loop : true // 요소 끝까지 갔을때에 처음으로 다시시작하는 옵션
caption : false // 이미지 안에 설명글
slideWidth: 186 // 슬라이드 되는 요소의 넓이
minSlides: 6 // 보여지는 슬라이드 최소 갯수.
maxSlides: 6 //보여지는 슬라이드 최대 갯수
slideMargin : 16.5 //슬라이드 되는 요소의 마진
moveSlides: 2 //이동되는 슬라이드 요소 갯수
mode : horizontal // 수평수직 모드
hideControlOnEnd : true // 처음과 끝이 있는 슬라이드
oSliderLoad : function() {} //슬라이더 로딩 완료후 실행 함수.
'기타 개발 관련' 카테고리의 다른 글
facebook, twitter 공유 og태그 사용예제 (0) | 2020.01.07 |
---|---|
TOMCAT LOG 일자별로 저장 (0) | 2020.01.07 |
Handlebar.js 기본 정리 (0) | 2020.01.07 |
Tomcat 서비스 등록 방법 (0) | 2019.04.02 |
js 파일 캐싱 없이 적용하기 (0) | 2019.02.15 |