如何使用Sly Scroller基於jQuery項目的導航？

我正在嘗試使用Sly Scroller進行水平滾動。我試圖閱讀和理解文檔，但我不明白如何使用它。如何使用Sly Scroller基於jQuery項目的導航？

任何人都可以幫助我開始比較閱讀文檔更簡單的例子，甚至指定任何jsfiddle實現或關於這個問題的教程？

2013-12-17 Mohan Reddy

在我給你一個例子，我想讓你精確你的環境（例如，你使用的是PHP框架？）首先你要確保你已經收取這些腳本： 1- [jquery 1.7]或> 2- sly.min.js 3- modernizr.js

。溫馨提示：您可以使用涼亭爲下次你要添加這個腳本

<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; 
    }

，如果您有任何疑問更遠不要猶豫，問:)

來源

2016-04-19 08:25:35

除了前面的答案，如果你要回調，您可以使用

$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.items [I] .el會得到您的活動力。注意：正如我使用過的，不是$（'this'）我需要使用getAttribute（），因爲它是一個DOM對象。

我也是新來的Js和Jquery，所以它可能不是最好的靈魂，但它適用於我

來源

2016-07-14 14:49:11 Ben

如何使用Sly Scroller基於jQuery項目的導航？

回答

相關問題