帶內容的垂直滑塊

我想垂直滑動內容。在文檔頁面中沒有任何關於垂直滑動的幻燈片。只有圖像的垂直滑塊在那裏。我嘗試了很多選項，但好像我的代碼不工作。請幫助我們。添加所有代碼後，內容不會完全滑動。帶內容的垂直滑塊

HTML代碼

<div class="fl testimonial"> 
         <div class="homepage-row-1st"> 
          <div class="chart"></div> 
          <p>Messges</p> 
         </div> 

        <!-- Message Slider --> 
         <div id="slider1_vertical" style="position: relative; margin: 0 auto;top: 0px; left: 0px; width: 385px; height: 274px;"> 
         <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 385px;height: 274px; overflow: hidden;"> 
         <div> 
         <div class="homepage-row-2nd"> 
          <div class="fl comma"> 
           <div class="comma-img"></div> 
          </div> 
          <div class="fl Message-desc"> 
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
           </p> 
           <div class="parent-name">Mr. xx xx (parent), <i>Ohio</i></div> 
          </div> 
          <div class="cb"></div> 
         </div> 
         </div> 
         <div> 
         <div class="homepage-row-2nd"> 
          <div class="fl comma"> 
           <div class="comma-img"></div> 
          </div> 
          <div class="fl message-desc"> 
           <p> 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
           </p> 
           <div class="name">xxx xxx (customer), <i>Ontario</i></div> 
          </div> 
          <div class="cb"></div> 
         </div> 
         </div> 
         <div> 
         <div class="homepage-row-2nd"> 
          <div class="fl comma"> 
           <div class="comma-img"></div> 
          </div> 
          <div class="fl message-desc"> 
           <p> 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
           </p> 
           <div class="name">xxx xxx(customer), <i>Alaska</i></div> 
          </div> 
          <div class="cb"></div> 
         </div> 
         </div> 
         </div> 
         </div> 
        </div>

jQuery代碼

$(document).ready(function(){ 

     var options_for_testimonial = { 
      $AutoPlay:true, 
      $AutoPlayInterval: 4000, 
      $PauseOnHover: 1, 
      $ArrowKeyNavigation: false, 
      $SlideDuration: 800, 
      $MinDragOffsetToSlide: 20, 
      $SlideSpacing: 0, 
      $DisplayPieces: 1, 
      $ParkingPosition: 0, 
      $UISearchMode: 1, 
      $PlayOrientation: 2, 
      $DragOrientation: 2, 
     }; 
     var jssor_slider2 = new $JssorSlider$("slider1_vertical", options_for_testimonial); 

});

來源

2015-06-16 Rudraksh Panigrahi

我剛纔測試了你的代碼，它的工作。

另外，您可以改進代碼的語法，請用$DragOrientation: 2代替$DragOrientation: 2,。

來源

2015-06-17 10:09:09 jssor

帶內容的垂直滑塊

回答

相關問題