javascript - JavaScript 中的垂直 slider

Question

我需要在java脚本中垂直 slider 。 slider 应该这样:单击加号[+] 时它会向下滑动，单击[-] 时它会向上滑动。从数据库中选取内容并显示在屏幕上。我需要以下代码的 slider 。

<ck:forEach items="${headings}" var="headings">
  <input type="button" value="<ck:out value="${headings.description}" />"><br>
  <ck:forEach items="${descriptions}" var="descriptions">
        <ck:if test="${headings.identifier == descriptions.identifier}">                    
                <ul><li><ck:out value="${descriptions.text}" /></li></ul>                   
        </ck:if>
  </ck:forEach>
        <br>
</ck:forEach>

我无法使用 JQuery 插件。

谢谢

Answer 1

你可以试试这个:

jQuery(document).ready(function($) {
   $('#simple-vertical').royalSlider({
    arrowsNav: true,
    arrowsNavAutoHide: false,
    fadeinLoadedSlide: true,
    controlNavigation: 'none',
    imageScaleMode: 'fill',
    imageAlignCenter:true,
    loop: false,
    loopRewind: false,
    numImagesToPreload: 4,
    slidesOrientation: 'vertical',
    keyboardNavEnabled: true,
    video: {
      autoHideArrows:true,
      autoHideControlNav:true
    },  

    autoScaleSlider: true, 
    autoScaleSliderWidth: 960,     
    autoScaleSliderHeight: 850,

    /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
    imgWidth: 640,
    imgHeight: 360
  });
});

DEMO PAGE