cycle2非圖像幻燈片轉換問題

Question

我正在將cycle2用於非圖像幻燈片。 內容只有句子，沒有圖像 問題是，當它正在轉換時，它會有一個在另一個之上，它看起來不太好。

<div class="row aboutUsChildRow" > 
     <div class="aboutUsChildHeadTitle col-md-12">  
      @awards.Name 
     </div> 
     <div class="awardList col-md-12"> 
      <div class="cycle-slideshow" 
       data-cycle-fx="scrollHorz" 
       data-cycle-timeout="0" 
       data-cycle-slides="> div.AwardPage" 
       data-cycle-prev="#prev" 
       data-cycle-next="#next"      
       data-cycle-pager="#custom-pager" 
       data-cycle-pager-template="<strong><a href=#> {{slideNum}} </a></strong>" 
       > 
         <div class="AwardPage" > 
            <div class="row awarditem"> 
             <div class="col-md-5 awardName"> 
              @b.Ngwersgewrgame 
             </div> 
             <div class="col-md-7 awardedBy"> 
              @b.GetProperty("awawsergwERGWRSGFrdedBy").Value 
             </div> 
             <div class="col-md-5 awardType"> 
              @b.GetProperty("awardTyWERdpe").Value 
             </div> 
             <div class="col-md-7 awardDescription"> 
              @b.GetProperty("awardDescrihdfhdsfhdfghption").Value 
             </div> 
            </div> 
         </div> 
         <div class="AwardPage" > 
            <div class="row awarditem"> 
             <div class="col-md-5 awardName"> 
              asdf@b.GetProperty("awardDescription").Value 
             </div> 
             <div class="col-md-7 awardedBy"> 
              asdf@b.GetProperty("awardDescription").Value 
             </div> 
             <div class="col-md-5 awardType"> 
              asdf@b.GetProperty("awardDescription").Value 
             </div> 
             <div class="col-md-7 awardDescription"> 
              asdf@b.GetProperty("awardDescription").Value 
             </div> 
            </div> 
         </div> 
      </div> 
      <div class="center pager"> 
       <div class="inline"><a href=# id="prev"><img src="/Images/left.png" class="timeLineLeft"></a></div> 
       <div id="custom-pager" class="center inline"></div> 
       <div class="inline"><a href=# id="next"><img src="/Images/left.png" class="timeLineRight"></a></div> 
      </div> 
     </div> 

https://jsfiddle.net/zu4sgj25/

代碼上方和的jsfiddle顯示問題

Answer 1

我不知道如何解決你的問題，但我真的建議你使用，而不是循環2的組隊，探索API（我以前從來沒有聽說過）

http://idangero.us/swiper/api/#.Wdy3WmiCyUk

它的工作原理非常好，也有一個很好的文檔