2016-02-18 113 views
0

這是一個幻燈片直接添加到WordPress的頁面。我已經添加了樣式表,腳本,幻燈片本身以及執行滑塊功能的腳本,但我無法使其運行。我怎樣才能得到這個jQuery腳本在WordPress上工作?

這是網頁的代碼:

 //PHP functions 
     wp_enqueue_style('slideshow', get_stylesheet_directory_uri() . '/css/slideshow.css', false, '1.1', 'all'); 
     wp_enqueue_script('jquery.cslider', get_stylesheet_directory_uri() . '/js/jquery.cslider.js', array ('jquery'), 1.1, true); 

     <div id="da-slider" class="da-slider"> 
      <div class="da-slide"> 
       <h2>1. Easy management</h2> 
       <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> 
       <a href="#" class="da-link">Read more</a> 

       <div class="da-info"></div> 
       <div class="da-img da-bg1"></div> 
      </div> 

      <div class="da-slide"> 
       <h2>2. Revolution</h2> 
       <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> 
       <a href="#" class="da-link">Read more</a> 

       <div class="da-info"></div> 
       <div class="da-img da-bg2"></div> 
      </div> 

      <div class="da-slide"> 
       <h2>3. Warm welcome</h2> 
       <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p> 
       <a href="#" class="da-link">Read more</a> 

       <div class="da-info"></div> 
       <div class="da-img da-bg3"></div> 
      </div> 

      <div class="da-slide"> 
       <h2>4. Quality Control</h2> 
       <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> 
       <a href="#" class="da-link">Read more</a> 

       <div class="da-info"></div> 
       <div class="da-img da-bg4"></div> 
      </div> 

      <nav class="da-arrows"> 
       <span class="da-arrows-prev"></span> 
       <span class="da-arrows-next"></span> 
      </nav> 
     </div> 

     <script type="text/javascript"> 
      jQuery(function() { 
       jQuery('#da-slider').cslider({ 
        autoplay : true, 
        bgincrement : 450 
       }); 
      }); 
     </script> 

這裏是cslider's link

+0

請提供任何演示鏈接。 – saadeez

+0

欣賞它可能很難給一個完整的演示,因爲它是一個wordpress構建。幾乎沒有什麼特別的東西:get_stylesheet_directory_uri()爲您提供了正確的目錄(即,您是否在Chrome開發工具中看到了正確的文件,並且沒有收到任何404錯誤)。文件版本名稱是否正確/需要?你似乎在尋找文件版本1.1的CSS和JS - 是否正確?其中一個作爲字符串('1.1')被另一個作爲數字(1.1)傳遞,但我不確定這是否重要。 –

+0

查看您的jQuery版本 –

回答

1

因爲滑塊在內部使用Modernizer,所以您必須在cslider之前加載Modernizer庫。當包含csliderwp_enqueue_script()函數時,最好的方法是通過Modernizer作爲依賴關係。

0

@pgk你是對的,問題是Modernizr的腳本錯過了,現在它的工作!非常感謝!!我必須更加關注Chrome開發工具...

+1

你好jos3m,也許你可以帶@pgk把他的評論轉換成答案,這樣他會收到適當的信用,如果不是這樣的話,請檢查這個答案被接受爲正確的結算。 –

+0

嗨克萊門斯,對不起我的無知,但我該怎麼做? – jos3m

+0

問他是否可以轉換它,他只需要回答而不是評論,並且您通過點擊支票圖標接受任何一個。 –

相關問題