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

안녕하세요.

지금 카페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 {
    <!--background: transparent url(img/carousel_control.png) no-repeat -2px -32px;-->
    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 {
    <!--background: transparent url(img/carousel_control.png) no-repeat -12px -32px;-->
    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>

   <!--con3-->
   <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>

     <div class="clearfix"></div>
     <a class="prev" class="prev" href="#">&lt;</a>
     <a class="next" class="next" href="#">&gt;</a>

   </div>
  </div>
   </div>

</code>