상세 컨텐츠

본문 제목

[카페24 쇼핑몰] 손쉽게 사용가능한 슬라이드플러그인(FlexSlider2)

쇼핑몰 코딩정보/카페24

by Web lover 2019. 12. 31. 15:06

본문

 

카페24 쇼핑몰에는 jQuery 1.4.4버전이 내장되어 있습니다.

슬라이드를 넣으려고해도 제이쿼리 버전이 너무 낮아서 안되는 경우가 많은데요~

제이쿼리 버전이랑 상관없이 손쉽게 사용할수있는 슬라이드 플러그인을 소개해드립니다~

 

FlexSlider2

http://flexslider.woothemes.com/

 

FlexSlider 2

 

flexslider.woothemes.com

워드프레스의 쇼핑몰결제관련해서 유명한 우커머스에서 제공하는 무료 슬라이드 플러그인입니다.

 

사용하기위해서 다운로드를 받으시면 여러가지 파일들이 많을텐데요

 

FlexSlider2 다운받은 폴더
demo폴더안

demo폴더 > index.html파일을 열어보시면 예제들이 나오게 됩니다.

 

너무 파일들이 많아서 정신이 없으실텐데요 ^^;;

 

손쉽게 사용하는것이 중요하니 일단 카페24 쇼핑몰에 설치 사용법을 알려드리겠습니다.

 

슬라이드예제
쇼핑몰메인 슬라이드 예제 index.html

<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라는 배경이 투명인 이미지를 추천해드립니다.^^

 

관련글 더보기

댓글 영역