카페24 쇼핑몰에는 jQuery 1.4.4버전이 내장되어 있습니다.
슬라이드를 넣으려고해도 제이쿼리 버전이 너무 낮아서 안되는 경우가 많은데요~
제이쿼리 버전이랑 상관없이 손쉽게 사용할수있는 슬라이드 플러그인을 소개해드립니다~
http://flexslider.woothemes.com/
워드프레스의 쇼핑몰결제관련해서 유명한 우커머스에서 제공하는 무료 슬라이드 플러그인입니다.
사용하기위해서 다운로드를 받으시면 여러가지 파일들이 많을텐데요
demo폴더 > index.html파일을 열어보시면 예제들이 나오게 됩니다.
너무 파일들이 많아서 정신이 없으실텐데요 ^^;;
손쉽게 사용하는것이 중요하니 일단 카페24 쇼핑몰에 설치 사용법을 알려드리겠습니다.
<li>이미지</li> 이소스가 하나의 슬라이드영역이고
이미지는 카페24 기본스킨의 메인화면에 제공하는 비주얼 이미지입니다.
li태그가 네개이므로 총 4개의 슬라이드가 출력됩니다.
1. jquery.flexslider.js을 FTP로 업로드하신뒤 위의 이미지처럼 html을 세팅해주세요.
파일들의 경로가 중요하니 꼭 확인해주세요.^^
그리고 jquery.flexslider.js 이외 파일들의 이름은 중요한게아니니 마음대로 지어주세요~
단 이름을 바꾸시면 html소스도 수정해주셔야합니다.
2. js파일을 만드신뒤 아래의 소스를 넣어주세요.(mainslider.js)
설명: flexslider라는 클래스를 가진 영역을 슬라이드작동하고 애니메이션은 slide, 슬라이드속도는 4초
(function($) {
$(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 4000,
});
});
})(jQuery);
3. 다운로드폴더안에 flexslider.css가 있지만 너무 복잡하기 때문에 필요한 css만 가져다가 수정해주시면 되는데요.
아래의 css만 있어도 정상적으로 작동합니다.(flexslider.css)
.mainslider{height:490px;overflow:hidden;}
.mainslider .flexslider{position:relative;}
.mainslider .slides li img{height:490px;}
.mainslider .flex-control-nav{width:100%;position:absolute;bottom:40px;left:0;text-align:center;}
.mainslider .flex-control-nav li{display:inline-block;}
.mainslider .flex-control-nav li a{display: inline-block;width:12px;height:12px;margin:0 4px;background:#000;border-radius:12px;-ms-border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;text-indent:-999em;opacity:0.6;filter: alpha(opacity=60);}
.mainslider .flex-control-nav li a.flex-active{background:#fff;opacity:1;filter: alpha(opacity=100);}
.mainslider .flex-direction-nav{}
.mainslider .flex-prev{position:absolute;top:50%;left:30px;width:18px;height:36px;margin-top:-18px;background:url("/SkinImg/img/btn_prev.png") no-repeat 0 0;background-size:18px 36px;text-indent:-999em;}
.mainslider .flex-next{position:absolute;top:50%;right:30px;width:18px;height:36px;margin-top:-18px;background:url("/SkinImg/img/btn_next.png") no-repeat 0 0;background-size:18px 36px;text-indent:-999em;}
.flex-control-nav : 슬라이드 아래부분의 OOOO 영역
.flex-direction-nav : 슬라이드 좌우 방향버튼 < >을 감싸고 있는 영역
.flex-prev : 슬라이드 좌측버튼
.flex-next : 슬라이드 우측버튼
지금 소스상에서는 좌우버튼을 이미지로 넣어둔상태인데 이미지경로에 따라 수정해주세요.
png라는 배경이 투명인 이미지를 추천해드립니다.^^
[카페24 쇼핑몰] 인스타그램 카페24 위젯 설치하기 (0) | 2020.01.04 |
---|---|
[카페24 쇼핑몰] 웹폰트 적용방법 (2) | 2020.01.03 |
[카페24 쇼핑몰] 코딩 초보자 기본요약 세번째 (0) | 2019.12.27 |
[카페24 쇼핑몰] 코딩 초보자 기본요약 두번째 (0) | 2019.12.27 |
[카페24 쇼핑몰] 코딩 초보자 기본요약 첫번째 (0) | 2019.12.26 |
댓글 영역