如何使用Sly Scroller jQuery项目导航？

Question

我正在尝试使用Sly Scroller进行水平滚动。我试着阅读和理解文档，但我就是不明白如何使用它。

与阅读文档相比，有没有人可以用更简单的示例来帮助我入门，或者指定任何jsfiddle实现或该主题的教程？

Answer 1

在我给你举一个例子之前，我想让你精确地描述一下你的环境(例如，你在使用php框架吗?)首先，你要确保你已经收费这些脚本:1-jquery1.7或> 2-sly.min.js 3-modernizr.js

。提示:您可以使用bower来完成此操作，然后必须添加以下脚本

<script type="text/javascript">


            jQuery(function($) {
                  'use strict';

                  // -------------------------------------------------------------
                  //   Basic Navigation
                  // -------------------------------------------------------------
                  (function() {
                    var $frame = $('#basic');
                    var $slidee = $frame.children('ul').eq(0);
                    var $wrap = $frame.parent();

                    // Call Sly on frame
                    $frame.sly({
                      horizontal: 1,
                      itemNav: 'basic',
                      smart: 1,
                      activateOn: 'click',
                      mouseDragging: 1,
                      touchDragging: 1,
                      releaseSwing: 1,
                      startAt: 3,
                      scrollBar: $wrap.find('.scrollbar'),
                      scrollBy: 1,
                      pagesBar: $wrap.find('.pages'),
                      activatePageOn: 'click',
                      speed: 300,
                      elasticBounds: 1,
                      easing: 'easeOutExpo',
                      dragHandle: 1,
                      dynamicHandle: 1,
                      clickBar: 1,

                      // Buttons
                      forward: $wrap.find('.forward'),
                      backward: $wrap.find('.backward'),
                      prev: $wrap.find('.prev'),
                      next: $wrap.find('.next'),
                      prevPage: $wrap.find('.prevPage'),
                      nextPage: $wrap.find('.nextPage')
                    });

                    // To Start button
                    $wrap.find('.toStart').on('click', function() {
                      var item = $(this).data('item');
                      // Animate a particular item to the start of the frame.
                      // If no item is provided, the whole content will be animated.
                      $frame.sly('toStart', item);
                    });

                    // To Center button
                    $wrap.find('.toCenter').on('click', function() {
                      var item = $(this).data('item');
                      // Animate a particular item to the center of the frame.
                      // If no item is provided, the whole content will be animated.
                      $frame.sly('toCenter', item);
                    });

                    // To End button
                    $wrap.find('.toEnd').on('click', function() {
                      var item = $(this).data('item');
                      // Animate a particular item to the end of the frame.
                      // If no item is provided, the whole content will be animated.
                      $frame.sly('toEnd', item);
                    });

                    // Add item
                    $wrap.find('.add').on('click', function() {
                      $frame.sly('add', '<li>' + $slidee.children().length + '</li>');
                    });

                    // Remove item
                    $wrap.find('.remove').on('click', function() {
                      $frame.sly('remove', -1);
                    });
                  }());

                  // -------------------------------------------------------------
                  //   Centered Navigation
                  // -------------------------------------------------------------
                  (function() {
                    var $frame = $('#centered');
                    var $wrap = $frame.parent();

                    // Call Sly on frame
                    $frame.sly({
                      horizontal: 1,
                      itemNav: 'centered',
                      smart: 1,
                      activateOn: 'click',
                      mouseDragging: 1,
                      touchDragging: 1,
                      releaseSwing: 1,
                      startAt: 4,
                      scrollBar: $wrap.find('.scrollbar'),
                      scrollBy: 1,
                      speed: 300,
                      elasticBounds: 1,
                      easing: 'easeOutExpo',
                      dragHandle: 1,
                      dynamicHandle: 1,
                      clickBar: 1,

                      // Buttons
                      prev: $wrap.find('.prev'),
                      next: $wrap.find('.next')
                    });
                  }());

                  // -------------------------------------------------------------
                  //   Force Centered Navigation
                  // -------------------------------------------------------------
                  (function() {
                    var $frame = $('#forcecentered');
                    var $wrap = $frame.parent();

                    // Call Sly on frame
                    $frame.sly({
                      horizontal: 1,
                      itemNav: 'forceCentered',
                      smart: 1,
                      activateMiddle: 1,
                      activateOn: 'click',
                      mouseDragging: 1,
                      touchDragging: 1,
                      releaseSwing: 1,
                      startAt: 0,
                      scrollBar: $wrap.find('.scrollbar'),
                      scrollBy: 1,
                      speed: 300,
                      elasticBounds: 1,
                      easing: 'easeOutExpo',
                      dragHandle: 1,
                      dynamicHandle: 1,
                      clickBar: 1,

                      // Buttons
                      prev: $wrap.find('.prev'),
                      next: $wrap.find('.next')
                    });
                  }());

                  // -------------------------------------------------------------
                  //   Cycle By Items
                  // -------------------------------------------------------------
                  (function() {
                    var $frame = $('#cycleitems');
                    var $wrap = $frame.parent();

                    // Call Sly on frame
                    $frame.sly({
                      horizontal: 1,
                      itemNav: 'basic',
                      smart: 1,
                      activateOn: 'click',
                      mouseDragging: 1,
                      touchDragging: 1,
                      releaseSwing: 1,
                      startAt: 0,
                      scrollBar: $wrap.find('.scrollbar'),
                      scrollBy: 1,
                      speed: 300,
                      elasticBounds: 1,
                      easing: 'easeOutExpo',
                      dragHandle: 1,
                      dynamicHandle: 1,
                      clickBar: 1,

                      // Cycling
                      cycleBy: 'items',
                      cycleInterval: 1000,
                      pauseOnHover: 1,

                      // Buttons
                      prev: $wrap.find('.prev'),
                      next: $wrap.find('.next')
                    });

                    // Pause button
                    $wrap.find('.pause').on('click', function() {
                      $frame.sly('pause');
                    });

                    // Resume button
                    $wrap.find('.resume').on('click', function() {
                      $frame.sly('resume');
                    });

                    // Toggle button
                    $wrap.find('.toggle').on('click', function() {
                      $frame.sly('toggle');
                    });
                  }());

                  // -------------------------------------------------------------
                  //   Cycle By Pages
                  // -------------------------------------------------------------
                  (function() {
                    var $frame = $('#cyclepages');
                    var $wrap = $frame.parent();

                    // Call Sly on frame
                    $frame.sly({
                      horizontal: 1,
                      itemNav: 'basic',
                      smart: 1,
                      activateOn: 'click',
                      mouseDragging: 1,
                      touchDragging: 1,
                      releaseSwing: 1,
                      startAt: 0,
                      scrollBar: $wrap.find('.scrollbar'),
                      scrollBy: 1,
                      pagesBar: $wrap.find('.pages'),
                      activatePageOn: 'click',
                      speed: 300,
                      elasticBounds: 1,
                      easing: 'easeOutExpo',
                      dragHandle: 1,
                      dynamicHandle: 1,
                      clickBar: 1,

                      // Cycling
                      cycleBy: 'pages',
                      cycleInterval: 1000,
                      pauseOnHover: 1,
                      startPaused: 1,

                      // Buttons
                      prevPage: $wrap.find('.prevPage'),
                      nextPage: $wrap.find('.nextPage')
                    });

                    // Pause button
                    $wrap.find('.pause').on('click', function() {
                      $frame.sly('pause');
                    });

                    // Resume button
                    $wrap.find('.resume').on('click', function() {
                      $frame.sly('resume');
                    });

                    // Toggle button
                    $wrap.find('.toggle').on('click', function() {
                      $frame.sly('toggle');
                    });
                  }());

                  // -------------------------------------------------------------
                  //   One Item Per Frame
                  // -------------------------------------------------------------
                  (function() {
                    var $frame = $('#oneperframe');
                    var $wrap = $frame.parent();

                    // Call Sly on frame
                    $frame.sly({
                      horizontal: 1,
                      itemNav: 'forceCentered',
                      smart: 1,
                      activateMiddle: 1,
                      mouseDragging: 1,
                      touchDragging: 1,
                      releaseSwing: 1,
                      startAt: 0,
                      scrollBar: $wrap.find('.scrollbar'),
                      scrollBy: 1,
                      speed: 300,
                      elasticBounds: 1,
                      easing: 'easeOutExpo',
                      dragHandle: 1,
                      dynamicHandle: 1,
                      clickBar: 1,

                      // Buttons
                      prev: $wrap.find('.prev'),
                      next: $wrap.find('.next')
                    });
                  }());

                  // -------------------------------------------------------------
                  //   Crazy
                  // -------------------------------------------------------------
                  (function() {
                    var $frame = $('#crazy');
                    var $slidee = $frame.children('ul').eq(0);
                    var $wrap = $frame.parent();

                    // Call Sly on frame
                    $frame.sly({
                      horizontal: 1,
                      itemNav: 'basic',
                      smart: 1,
                      activateOn: 'click',
                      mouseDragging: 1,
                      touchDragging: 1,
                      releaseSwing: 1,
                      startAt: 3,
                      scrollBar: $wrap.find('.scrollbar'),
                      scrollBy: 1,
                      pagesBar: $wrap.find('.pages'),
                      activatePageOn: 'click',
                      speed: 300,
                      elasticBounds: 1,
                      easing: 'easeOutExpo',
                      dragHandle: 1,
                      dynamicHandle: 1,
                      clickBar: 1,

                      // Buttons
                      forward: $wrap.find('.forward'),
                      backward: $wrap.find('.backward'),
                      prev: $wrap.find('.prev'),
                      next: $wrap.find('.next'),
                      prevPage: $wrap.find('.prevPage'),
                      nextPage: $wrap.find('.nextPage')
                    });

                    // To Start button
                    $wrap.find('.toStart').on('click', function() {
                      var item = $(this).data('item');
                      // Animate a particular item to the start of the frame.
                      // If no item is provided, the whole content will be animated.
                      $frame.sly('toStart', item);
                    });

                    // To Center button
                    $wrap.find('.toCenter').on('click', function() {
                      var item = $(this).data('item');
                      // Animate a particular item to the center of the frame.
                      // If no item is provided, the whole content will be animated.
                      $frame.sly('toCenter', item);
                    });

                    // To End button
                    $wrap.find('.toEnd').on('click', function() {
                      var item = $(this).data('item');
                      // Animate a particular item to the end of the frame.
                      // If no item is provided, the whole content will be animated.
                      $frame.sly('toEnd', item);
                    });

                    // Add item
                    $wrap.find('.add').on('click', function() {
                      $frame.sly('add', '<li>' + $slidee.children().length + '</li>');
                    });

                    // Remove item
                    $wrap.find('.remove').on('click', function() {
                      $frame.sly('remove', -1);
                    });
                  }());
                });
    </script>

正如您在前面的脚本中看到的，在这里的html部分中有几个导航，您只需选择其中一个。

    <div class="frame" id="cycleitems">// you have to put in the id the animation that you like
        <ul class="clearfix">

           <!-- please insert inside the li tag what you want to put inside the sly scroller :D -->

           <li> some code here for example <img src ="blabla" /> </li>
           <li> some code here for example <img src ="blabla" /> </li>
           <li> some code here for example <img src ="blabla" /> </li>
        </ul></div>

最后是css部分：

    .crazy ul li:nth-child(2n) {
      width: 100px;
      margin: 0 4px 0 20px;
    }

    .crazy ul li:nth-child(3n) {
      width: 300px;
      margin: 0 10px 0 5px;
    }

    .crazy ul li:nth-child(4n) {
      width: 400px;
      margin: 0 30px 0 2px;
    }

如果您有任何进一步的问题，请不要犹豫地问:)

Answer 2

除了前面的答案之外，如果你想回调，你可以使用

$frame.sly('on','active',function(e,i){
   console.log("e",e);
   console.log("i",i);
   console.log(this.items[i].el.getAttribute("data-filter"));
});

this.itemsi.el将获取您的活动li。注意:因为我使用的是这个，而不是$(' this ')，所以我需要使用getAttribute()，因为它是一个DOM对象。

我也是Js和Jquery的新手，所以它可能不是最好的解决方案，但它对我来说很有效