內容滑塊 - 問題與JQuery

我試圖使用該網站的演示：http://slidesjs.com/#overview
並嘗試實現頁面上的兩個滑塊。我正在自定義鏈接演示。內容滑塊 - 問題與JQuery

正如我使用兩個不同的滑塊：slider1和slider2與不同的CSS，所以我使用global.css滑塊-1和創建text.css滑塊-2。我注意到js：slides.min.jquery.js文件使用像'slides_container'這樣的'css'元素，接下來，prev所以我創建了另一個js：slider.text.jquery.js替換了css內容：slides_containerT，nextT，prevT按照text.css。但代碼不起作用。請幫助我，因爲我的項目下週一到期。

請幫助解決isse並讓我知道是否需要更多細節。

對不起，我試圖添加HTML，CSS和jQuery代碼，但我遇到了錯誤。

能否請你建議如何改變什麼，我應該做的JS：slides.min.jquery.js 使之呈現我的CSS內容第二滑塊：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Demo</title> 
<link rel="stylesheet" href="css/new.css"> 
<link rel="stylesheet" href="css/text.css">  
<script src="js/slider/jquery.min.js"></script> 
<script src="js/slider/slides.min.jquery.js"></script> 
<script src="js/slider/slider.text.jquery.js"></script> 
<script> 
$(function(){ 
    // Set starting slide to 1 
     var startSlide = 1; 
     // Get slide number if it exists 
     if (window.location.hash) { 
      startSlide = window.location.hash.replace('#',''); 
     } 
     // Initialize Slides 1 
     $('#slides1').slides({ 
      preload: true, 
      preloadImage: 'img/slider/loading.gif', 
      generatePagination: true, 
      play: 5000, 
      pause: 2500, 
      hoverPause: true, 
      // Get the starting slide 
      start: startSlide, 
      animationComplete: function(current){ 
       // Set the slide number as a hash 
       window.location.hash = '#' + current; 
      } 
     }); 

    // Initialize Slides 2 
     $('#slides2').slides({ 
      preload: true, 
      preloadImage: 'img/slider/loading.gif', 
      generatePagination: true, 
      play: 5000, 
      pause: 2500, 
      hoverPause: true, 
      // Get the starting slide 
      start: startSlide, 
      animationComplete: function(current){ 
       // Set the slide number as a hash 
       window.location.hash = '#' + current; 
      } 
     });  

    }); 
    </script> 



<div id="container"> 
<div id="example"> 
    <div id="slides1"> 
    <div class="slides_container"> 
    <div class="slide"> 
    <img src="img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide"> 
    <div class="tmpSlideCopy"> 
     <h1>A History of Innovation</h1> 
     <p>SLIDE 1 </p> 
    </div> 
    </div> 
    <div class="slide"> 
    <img src="img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide"> 
    <div class="tmpSlideCopy"> 
     <h1>Second Slide</h1> 
     <p>Slide 2</p> 
    </div> 
    </div> 
    <div class="slide"> 
    <img src="img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide"> 
    <div class="tmpSlideCopy"> 
    <h1>Third Slide</h1> 
    <p>Slide 3</p> 
    </div> 
    </div> 
</div> 
<a href="#" class="prev"><img src="img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
<a href="#" class="next"><img src="img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>

歡呼聲 pam

來源

2012-12-12 user1891297

您可以試試下面的代碼。

$(function(){ 
    $("#slides").slides({ 
    container: 'slides_container' 
    }); 
});

容器是「css」風格。在http://slidesjs.com/#docs

各種性能和造型

 .slides_container { 
      width:570px; 
      height:270px; 
     }

更多信息

來源

2013-03-04 17:49:01 Purus

內容滑塊 - 問題與JQuery

回答

相關問題