Geek Answers Handbook

How to use Sly Scroller jQuery to navigate elements?

I am trying to use Sly Scroller to scroll horizontally. I tried to read and understand the documentation, but I just don't understand how to use it.

Can someone help me get started, perhaps with simpler examples compared to reading the documentation, or even point out any implementation jsfiddleor tutorial on this?

+4
source share
2 answers

Before I give you an example, I would like you to clarify your environment (for example, you use the PHP infrastructure)? First of all, to make sure that you have charged these scripts: 1- [jquery 1.7] or> 2- sly.min.js 3- modernizr.js

. Tips: you can use Then you should add this script

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

as you can see in the previous script, there are several navigations, you should just select one of them in the html part here

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

and finally the css part:

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

If you have any questions, feel free to ask :)

+1
source

In addition to the previous answer, if you want a callback, you can use

$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, , .

0

More articles:


All Articles