2014-03-19 4 views
1

한 페이지에 두 개의 JCarousel을 가지고 있습니다.다중 Jcarousel

<script type="text/javascript"> 

    jQuery(document).ready(function() { 

     jQuery('.quotes').jcarousel(); 

     jQuery('#wide').jcarousel({ 
      vertical: true 
     }); 
    }); 

</script> 

어떤 아이디어 :

<div class="jcarousel2-wrapper"> 

<div class="jcarousel2"> 
    <ul id="quotes"> 
    <li><img src="assets/Uploads/a.jpg" width="300" height="100" alt=""></li> 
    <li><img src="assets/Uploads/b.jpg" width="300" height="100" alt=""></li> 
    <li><img src="assets/Uploads/c.jpg" width="300" height="100" alt=""></li> 
    </ul> 
</div> 

<a href="/assembly/index.php/home-2/#" class="jcarousel-control-prev">&lsaquo;</a> 
<a href="/assembly/index.php/home-2/#" class="jcarousel-control-next">&rsaquo;</a> 

</div> 


<div class="jcarousel-wrapper"> 

<div class="jcarousel"> 
    <ul id="wide"> 
    <li><img src="assets/Uploads/1978506-10152294289342922-1805665805-o.jpg" alt=""></li> 
    <li><img src="assets/Uploads/backcoffee-square.png" alt=""></li> 
    </ul> 
</div> 

<a href="/assembly/index.php/home-2/#" class="jcarousel-control-prev">&lsaquo;</a> 
<a href="/assembly/index.php/home-2/#" class="jcarousel-control-next">&rsaquo;</a> 

</div> 

나는이있다 : 최고 회전 목마에 대한 컨트롤 (이전/다음) 두 번째 회전 목마를 제어하는?

감사합니다.

앨런.

답변

0

적어도 두 번째 캐 러셀의 이전 버튼 & 다음 버튼을 변경하고 jcarousels 파일의 결과 자바 스크립트를 업데이트해야합니다.

나는 같은 페이지에 회전 목마를 두지 않으려 고 노력할 것이다.

You can see that the a.control-next is what is triggering the function

0

당신에게이 동작을 제공하며, 중복 클래스가 잘되어야하는 jcarousel 제어 플러그인 있습니다.

제어 플러그인 설정/예 : http://sorgalla.com/jcarousel/docs/plugins/control/reference/installation.html

당신이 당신의 페이지에서 해당 플러그인을 포함하고 일단은, 코드가 간단해야한다 등 :만큼 컨트롤의 각 세트이기 때문에

$(function() { 
    $('.jcarousel').jcarousel({ 
     // Core configuration goes here 
    }); 

    $('.jcarousel-control-prev').jcarouselControl({ 
     target: '-=1' 
    }); 

    $('.jcarousel-control-next').jcarouselControl({ 
     target: '+=1' 
    }); 
}); 

그것의 회전 목마가있는 래퍼에서 동일한 회전 목마 클래스를 사용하는 경우에도 한 페이지에 여러 개의 jcarousels를 포함하는 것이 매우 간단합니다.