상품명 | 메인 타이틀 이미지 모션 변경하기 |
---|---|
제조사 | 자체제작 |
원산지 | 국내 |
판매가 | 설명서 |
상품코드 | P00000BF |
수량 | ![]() ![]() |
트렌드 | 기본트렌드 |
국내·해외배송 | 국내배송 |
배송방법 | 택배 |
배송비 | 무료 |
SNS 상품홍보 | ![]() ![]() |
---|
![]() |
(최소주문수량 1개 이상 / 최대주문수량 0개 이하)
메인레이아웃 하단쯤에 보시면 스크립트가 있습니다.
이부분들이 슬라이더를 사용하기 위한 옵션들 입니다.
잘 만 설정하면 많은 변화를 줄수 있는 설정이니 변경을 해보세요.
먼저 현재는 모든 모션이 슬라이더로 설정이 되어 있습니다.
여기서 슬라이더를 페이드로 변경하는 설정을 알려드립니다.
메인레이아웃파일을 열어 보시면 위의 이미지처럼 해당 스크립트들이 보입니다.
그중 멘위부분
$('.bxslider').bxSlider({ // 메인타이틀 슬라이더
// mode: 'fade', // 요거 할성화 하면 페이드로
auto: true,
// autoControls: true, // 활성화시 오토 스탑,플레이 버튼 숨기기
// pagerCustom: '#bx-pager', // 활성화시 콘트롤버튼 숨기기
// captions: true, // 활성화시 택스트글자 보이기
// nextSelector: '#slider-next', // 활성화시 우버튼 숨기기
// prevSelector: '#slider-prev', // 활성화시 좌버튼 숨기기
pause: 3000
});
이 분이 메인타이틀 슬라이더 설정하는 부분입니다.
위 부분중에
// mode: 'fade', // 요거 할성화 하면 페이드로
와 같은 부분을
mode: 'fade', // 요거 할성화 하면 페이드로
로 설정합니다.
앞부분 // 를 삭제하면 바로 페이드 모션으로 변경이 됩니다.
앞부분을 삭제하고 저장을 누루시고 쇼핑몰화면에서 확인을 해보세요.
위와 같이 다른 부분들도
앞부분 // 를 삭제해가면 무엇이 변화는지 알수 있답니다.
위 스크립트 뿐만 아니라 다른 스크립드에도 해당 부분들을 삽입하여 차원이 다른 슬라이더/ 상품진열등을 만들수가 있습니다.