Галерея изображений Карусель

Question

Я стараюсь использовать галерею FredSel в каруселях. но ничего не случилось, когда я нажал на кнопку, чтобы открыть. Галерея i chosse - это галерея салфетки, и я загрузил библиотеки с сайта. я пробовал много вещей, но ничего не работало.

Кто-нибудь может мне помочь? Я новичок в jQuery

Я не знаю, что я делаю неправильно.

это мой код.

<script src="jquery.carouFredSel-6.2.0-packed.js"></script> 
<script src="jquery.touchSwipe.min.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 

JAVASCRIPT:

<script> 
$("#foo4").carouFredSel({ 
    auto  : false, 
    swipe  : { 
     onTouch  : true, 
     onMouse  : true 
    } 
}); 
</script> 

HTML5

<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="footer">      
     <a href="#p1" data-icon="home" data-iconpos="notext">Home</a> 
     <h1>HOME</h1> 
     <a href="#foo4" data-icon="grid" data-iconpos="notext" data-inline="true" class="ui-btn-right" data-direction="reverse" style="margin-right:70px">GALLERY</a> 
</div> 

    <div id="image_carousel"> 
     <div id="foo4"> 
      <img src="images/small/1.jpg" alt="basketball" width="140" height="140" /> 
      <img src="images/small/2.jpg" alt="beachtree" width="140" height="140" /> 
      <img src="images/small/3.jpg" alt="cupcackes" width="140" height="140" /> 
      <img src="images/small/4.jpg" alt="hangmat" width="140" height="140" /> 
      <img src="images/small/5.jpg" alt="new york" width="140" height="140" /> 
      <img src="images/small/6.jpg" alt="laundry" width="140" height="140" /> 
      <img src="images/small/7.jpg" alt="mom son" width="140" height="140" /> 
      <img src="images/small/8.jpg" alt="picknick" width="140" height="140" /> 
      <img src="images/small/9.jpg" alt="shoes" width="140" height="140" /> 
      <img src="images/small/10.jpg" alt="paris" width="140" height="140" /> 
      <img src="images/small/11.jpg" alt="sunbading" width="140" height="140" /> 
      <img src="images/small/12.jpg" alt="yellow couple" width="140" height="140" /> 
     </div> 
     <div class="clearfix"></div> 
    </div> 

CSS:

#image_carousel { 
    padding: 15px 0 15px 40px; 
} 
#image_carousel img { 
    border: 1px solid #ccc; 
    background-color: white; 
    padding: 9px; 
    margin: 7px; 
    display: block; 
    float: left; 
} 
#clearfix { 
    float: none; 
    clear: both; 
} 

Answer 1

Re организовать последовательность

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 
<script src="jquery.carouFredSel-6.2.0-packed.js"></script> 
<script src="jquery.touchSwipe.min.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 

, а затем попробуйте