jquery - コンテンツ パネル スイッチャーと SwipeJS

Question

コンテンツ パネル スイッチャー ( http://code.google.com/p/jquery-content-panel-switcher/ ) と Swipejs ( http://swipejs.com/ ) を一緒に使用しようとしています。これらの両方を独立して動作させることはできますが、swipejs コードをコンテンツ パネルの 1 つに配置すると、コードが壊れます。私はjQueryとの競合があるに違いないと思っていますが、私はjQueryにかなり慣れていないので、問題をデバッグするために何をすべきかについて悩んでいます。以下は私の現在のコードです。助けてくれてありがとう。

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.content-panel-switcher.js'></script>  
<script type='text/javascript'>
$(document).ready(function() {
    jcps.fader(300, '#switcher-panel', '.set1');
    jcps.slider(500, '#switcher-panel2', '.set2');
});
</script>

<table>
<tr>
<td>
<div class="block mid margin_auto">
    <div class="header">
        <div class="nav_buttons"> 
            <a id="set1panel1" class="switcher set1">Home</a> 
            <a id="set1panel2" class="switcher set1">Photography</a> 
            <a id="set1panel3" class="switcher set1">Design</a> 
        </div> 
    </div>
        <div id="switcher-panel"></div>

        <!-- Dummy Data -->
        <div id="set1panel1-content" class="switcher-content set1 show">
            <h2>Set 1 Panel 1</h2>
            Set 1 Panel 1 content goes here.....
            <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
                <div class='swipe-wrap'>
                    <div><b>0</b></div>
                    <div><b>1</b></div>
                    <div><b>2</b></div>
                    <div><b>3</b></div>
                    <div><b>4</b></div>
                    <div><b>5</b></div>
                </div>
            </div>
            <div style='text-align:center;padding-top:20px;'>
              <button onclick='mySwipe.prev()'>prev</button> 
              <button onclick='mySwipe.next()'>next</button>
            </div>
        </div>
        <div id="set1panel2-content" class="switcher-content set1">
        <h2>Set 1 Panel 2</h2>
            Set 1 Panel 2 content goes here.....
        </div>
        <div id="set1panel3-content" class="switcher-content set1">
        <h2>Set 1 Panel 3</h2>
            Set 1 Panel 3 content goes here.....
        </div>
</div>
</td>
<td>
<div class="block mid margin_auto">
    <div class="header">
        <div class="nav_buttons"> 
            <a id="set2panel1" class="switcher set2">Experience</a> 
            <a id="set2panel2" class="switcher set2">Sports</a> 
            <a id="set2panel3" class="switcher set2">Hobbies</a> 
        </div> 
    </div>
        <div id="switcher-panel2"></div>

        <!-- Dummy Data -->
        <div id="set2panel1-content" class="switcher-content set2 show">
        <h2>Set 2 Panel 1</h2>
        Set 2 Panel 1 content goes here.....
            <div id='mySwipe2' style='max-width:500px;margin:0 auto' class='swipe'>
                <div class='swipe-wrap'>
                    <div><b>A</b></div>
                    <div><b>B</b></div>
                    <div><b>C</b></div>
                    <div><b>D</b></div>
                    <div><b>E</b></div>
                </div>
            </div>
            <div style='text-align:center;padding-top:20px;'>
              <button onclick='mySwipe.prev()'>prev</button> 
              <button onclick='mySwipe.next()'>next</button>
            </div>
        </div>
        <div id="set2panel2-content" class="switcher-content set2">
        <h2>Set 2 Panel 2</h2>
        Set 2 Panel 2 content goes here.....
        </div>
        <div id="set2panel3-content" class="switcher-content set2">
        <h2>Set 2 Panel 3</h2>
        Set 2 Panel 3 content goes here.....
        </div>
</div>
</td>
</tr>
</table>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='js/swipe.js'></script>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
  startSlide: 0,
  // auto: 3000,
  // continuous: true,
  // disableScroll: true,
  // stopPropagation: true,
  // callback: function(index, element) {},
  // transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>
<script>
// pure JS
var elem = document.getElementById('mySwipe2');
window.mySwipe2 = Swipe(elem, {
  startSlide: 0,
  // auto: 3000,
  // continuous: true,
  // disableScroll: true,
  // stopPropagation: true,
  // callback: function(index, element) {},
  // transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>