2014-02-26 29 views
0

我正在開發一個網站,我不能得到Liquid Slider的交聯功能工作。我已啓用交叉鏈接。所以我不確定我做錯了什麼。不能交聯工作liquidSlider

幻燈片

  <div class="liquid-slider" id="main-slider"> 
      <div> 
       <h2 class="title">Slide 1</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p> 
      </div> 
      <div> 
       <h2 class="title">Slide 2</h2> 
       <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p> 
      </div> 
      <div> 
       <h2 class="title">Slide 3</h2> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
      </div> 
      <div> 
       <h2 class="title">Slide 4</h2> 
       <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p> 
      </div> 
     </div> 

也許我需要給的DIV一個特殊的ID?

這裏是我想在

 <div id="bottomBanner1" class="large-3 columns small-6 columns"> 
     <p class="bannerText"><a href="#1" data-liquidslider-ref="slider-id">DIDs</a> 
    </div> 
    <div id="bottomBanner2" class="large-3 columns small-6 columns"> 
     <p class="bannerText"><a href="#2" data-liquidslider-ref="slider-id">Orig</a></p> 
    </div> 
    <div id="bottomBanner3" class="large-3 columns small-6 columns"> 
     <p class="bannerText"><a href="#3" data-liquidslider-ref="slider-id">Term</a>I</p> 
    </div> 
    <div id="bottomBanner4" class="large-3 columns small-6 columns"> 
     <p class="bannerText"><a href="#3" data-liquidslider-ref="slider-id">E911</a></p> 
    </div> 

的交聯的部分而這裏是要表明,交聯的啓用javascript。

crossLinks:true, 
hashLinking:false, 
hashTitleSelector:".title" 

我做錯了什麼?

+0

請稍微描述一下。由於「它沒有顯示任何東西」不會幫助我們縮小你的問題。 – Idris

回答

1

問題是,您有交叉鏈接的鏈接指向滑塊的錯誤ID參考,例如,

... 

<div id="bottomBanner2" class="large-3 columns small-6 columns"> 
    <p class="bannerText"><a href="#2" data-liquidslider-ref="slider-id">Orig</a></p> 
</div> 

... 

應該是:

.... 

<div id="bottomBanner2" class="large-3 columns small-6 columns"> 
    <p class="bannerText"><a href="#2" data-liquidslider-ref="main-slider">Orig</a></p> 
</div> 

.... 

請注意,在data-liquidslider-ref的變化,使其指向正確的ID。

+0

完美工作。非常感謝你! – onTheInternet