카페24 슬라이드 제이쿼리 오류

스몰디자인 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017.02.23 15:11:12 12106 (1.♡.♡.33)

답변 1

본문

안녕하세요.

지금 카페24로 쇼핑몰을 만들고 있는 초짜 디자이너 입니다.

카페24 솔루션 자체가 JQuery 1.4.4 버전이 내장되어있어서

제가 사용하려고 했던 스크립트 소스를 넣으면 충돌이 생깁니다.(제이쿼리 버전이 달라서인거같아요 ㅠㅠ)

http://sdsupport.cafe24.com/board/guide/read_high.html?no=400&board_no=6

여기에 내용이 나와있긴 한데

정말 어떻게 수정해야하는지 이해를 못하겠어서

이렇게 문의 남깁니다.

<code>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
  <script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {

    $('.carousel ul').carouFredSel({
     prev: '.prev',
     next: '.next',
     pagination: ".pager",
     scroll: 1000
    });

   });
</script>
<style type="text/css">

   .con3 .slider_wrapper {
    width: 735px;
    height: 500px;
    margin: -110px 0 0 -367px;
    position: absolute;
    left: 50%;
    top: 50%;
   }

   .con3 .carousel {
    width: 735px;
    position:vrelative;
   }
   .con3 .carousel ul {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
   }
   .con3 .carousel li {
    font-size: 40px;
    color: #999;
    text-align: center;
    display: block;
    width: 200px;
    height: 500px;
    padding: 0;
    margin: 6px;
    float: left;
    position: relative;
   }

   .con3 .carousel li img {
    width: 201px;
    height: 500px;
    margin-top: 14px;
   }

   .con3 .carousel li span {
    text-indent: -999px;
    display: block;
    overflow: hidden;
    width: 200px;
    height: 500px;
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 16px;
   }

.con3 .clearfix {
    float: none;
    clear: both;
   }
   .con3 .carousel .prev, .carousel .next {
    background: transparent url(img/carousel_control.png) no-repeat 0 0;
    text-indent: -999px;
    display: block;
    overflow: hidden;
    width: 15px;
    height: 21px;
    margin-left: 10px;
    position: absolute;
    top: 70px;
   }
   .con3 .carousel .prev {
    background-position: 0 0;
    left: -30px;
   }
   .con3 .carousel .prev:hover {
    left: -31px;
   }
   .con3 .carousel .next {
    background-position: -18px 0;
    right: -20px;
   }
   .con3 .carousel .next:hover {
    right: -21px;
   }
   .con3 .carousel .pager {
    text-align: center;
    margin: 0 auto;
   }
   .con3 .carousel .pager a {
    
    text-decoration: none;
    text-indent: -999px;
    display: inline-block;
    overflow: hidden;
    width: 8px;
    height: 8px;
    margin: 0 5px 0 0;
   }
   .con3 .carousel .pager a.selected {
    
    text-decoration: underline;
   }

   .con3 .source {
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 10px;
    left: 0;
   }
   .con3 .source, #source a {
    font-size: 12px;
    color: #999;
   }

.con3 .caroufredsel_wrapper {width:813px !important;}

</style>

<div class="con3">
               <h1>Recomend Products</h1>
      <p>제품 이미지를 클릭하시면 추천해드리는 상품을 구매하실 수 있습니다.</p>

    <div class="slider_wrapper">
    <div class="carousel">
     <ul>
      <li><img src="http://moumoucosmetic.cafe24.com/images/item_01.jpg" alt="" /><span>Image1</span></li>
      <li><img src="http://moumoucosmetic.cafe24.com/images/item_02.jpg" alt="" /><span>Image2</span></li>
      <li><img src="http://moumoucosmetic.cafe24.com/images/item_03.jpg" alt="" /><span>Image3</span></li>
      <li><img src="http://moumoucosmetic.cafe24.com/images/item_04.jpg" alt="" /><span>Image4</span></li>
      <li><img src="http://moumoucosmetic.cafe24.com/images/item_01.jpg" alt="" /><span>Image5</span></li>
      <li><img src="http://moumoucosmetic.cafe24.com/images/item_02.jpg" alt="" /><span>Image6</span></li>
     </ul>