Trigger event to change slider image by clicking the directional arrows on the keyboard

1

I'm using a jQuery slider, but I would like to improve it in Accessibility .

I would like the keyboard arrows ← and right → to navigate my slider similarly to the click navigation arrows. But I would also like that when pressing the directional keys, the image of the slide changed obeying the direction in which it was keyed (animation often found in gallery applications for mobile).

So if the user presses → , I want the image to go to the left, and if I press ← I want the image to go right.

/*! http://responsiveslides.com v1.54 by @viljamis */
(function (c, I, B) {
  c.fn.responsiveSlides = function (l) {
    var a = c.extend({
      auto: !0,
      speed: 500,
      timeout: 4000,
      pager: !1,
      nav: !1,
      random: !1,
      pause: !1,
      pauseControls: !0,
      prevText: 'Previous',
      nextText: 'Next',
      maxwidth: '',
      navContainer: '',
      manualControls: '',
      namespace: 'rslides',
      before: c.noop,
      after: c.noop
    }, l);
    return this.each(function () {
      B++;
      var f = c(this),
      s,
      r,
      t,
      m,
      p,
      q,
      n = 0,
      e = f.children(),
      C = e.size(),
      h = parseFloat(a.speed),
      D = parseFloat(a.timeout),
      u = parseFloat(a.maxwidth),
      g = a.namespace,
      d = g + B,
      E = g + '_nav ' + d + '_nav',
      v = g + '_here',
      j = d + '_on',
      w = d + '_s',
      k = c('<ul class=\'' + g + '_tabs ' + d + '_tabs\' />'),
      x = {
        'float': 'left',
        position: 'relative',
        opacity: 1,
        zIndex: 2
      },
      y = {
        'float': 'none',
        position: 'absolute',
        opacity: 0,
        zIndex: 1
      },
      F = function () {
        var b = (document.body || document.documentElement).style,
        a = 'transition';
        if ('string' === typeof b[a]) return !0;
        s = [
          'Moz',
          'Webkit',
          'Khtml',
          'O',
          'ms'
        ];
        var a = a.charAt(0).toUpperCase() + a.substr(1),
        c;
        for (c = 0; c < s.length; c++) if ('string' === typeof b[s[c] + a]) return !0;
        return !1
      }(),
      z = function (b) {
        a.before(b);
        F ? (e.removeClass(j).css(y).eq(b).addClass(j).css(x), n = b, setTimeout(function () {
          a.after(b)
        }, h))  : e.stop().fadeOut(h, function () {
          c(this).removeClass(j).css(y).css('opacity', 1)
        }).eq(b).fadeIn(h, function () {
          c(this).addClass(j).css(x);
          a.after(b);
          n = b
        })
      };
      a.random && (e.sort(function () {
        return Math.round(Math.random()) - 0.5
      }), f.empty().append(e));
      e.each(function (a) {
        this.id = w + a
      });
      f.addClass(g + ' ' + d);
      l && l.maxwidth && f.css('max-width', u);
      e.hide().css(y).eq(0).addClass(j).css(x).show();
      F && e.show().css({
        '-webkit-transition': 'opacity ' + h + 'ms ease-in-out',
        '-moz-transition': 'opacity ' +
        h + 'ms ease-in-out',
        '-o-transition': 'opacity ' + h + 'ms ease-in-out',
        transition: 'opacity ' + h + 'ms ease-in-out'
      });
      if (1 < e.size()) {
        if (D < h + 100) return;
        if (a.pager && !a.manualControls) {
          var A = [
          ];
          e.each(function (a) {
            a += 1;
            A += '<li><a href=\'#\' class=\'' + w + a + '\'>' + a + '</a></li>'
          });
          k.append(A);
          l.navContainer ? c(a.navContainer).append(k)  : f.after(k)
        }
        a.manualControls && (k = c(a.manualControls), k.addClass(g + '_tabs ' + d + '_tabs'));
        (a.pager || a.manualControls) && k.find('li').each(function (a) {
          c(this).addClass(w + (a + 1))
        });
        if (a.pager || a.manualControls) q =
        k.find('a'),
        r = function (a) {
          q.closest('li').removeClass(v).eq(a).addClass(v)
        };
        a.auto && (t = function () {
          p = setInterval(function () {
            e.stop(!0, !0);
            var b = n + 1 < C ? n + 1 : 0;
            (a.pager || a.manualControls) && r(b);
            z(b)
          }, D)
        }, t());
        m = function () {
          a.auto && (clearInterval(p), t())
        };
        a.pause && f.hover(function () {
          clearInterval(p)
        }, function () {
          m()
        });
        if (a.pager || a.manualControls) q.bind('click', function (b) {
          b.preventDefault();
          a.pauseControls || m();
          b = q.index(this);
          n === b || c('.' + j).queue('fx').length || (r(b), z(b))
        }).eq(0).closest('li').addClass(v),
        a.pauseControls && q.hover(function () {
          clearInterval(p)
        }, function () {
          m()
        });
        if (a.nav) {
          g = '<a href=\'#\' class=\'' + E + ' prev\'>' + a.prevText + '</a><a href=\'#\' class=\'' + E + ' next\'>' + a.nextText + '</a>';
          l.navContainer ? c(a.navContainer).append(g)  : f.after(g);
          var d = c('.' + d + '_nav'),
          G = d.filter('.prev');
          d.bind('click', function (b) {
            b.preventDefault();
            b = c('.' + j);
            if (!b.queue('fx').length) {
              var d = e.index(b);
              b = d - 1;
              d = d + 1 < C ? n + 1 : 0;
              z(c(this) [0] === G[0] ? b : d);
              if (a.pager || a.manualControls) r(c(this) [0] === G[0] ? b : d);
              a.pauseControls || m()
            }
          });
          a.pauseControls && d.hover(function () {
            clearInterval(p)
          }, function () {
            m()
          })
        }
      }
      if ('undefined' === typeof document.body.style.maxWidth && l.maxwidth) {
        var H = function () {
          f.css('width', '100%');
          f.width() > u && f.css('width', u)
        };
        H();
        c(I).bind('resize', function () {
          H()
        })
      }
    })
  }
}) (jQuery, this, 0);

    $(function () {
      // Slideshow 4
      $("#slider4").responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
        speed: 0,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });

    });
* {
  margin: 0;
  padding: 0;
}

/* Callback example */


.callbacks_container {
  position: relative;
  width: 100%; height:520px; background:#C39
  }

.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("http://i.imgur.com/lWEau8H.gif") no-repeat left top;
  margin-top: -45px;
  }

.callbacks_nav:active {
  opacity: 1.0;
  }

.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }


/*! BOX DO SLIDE */

.rslides {width:100%; position: relative; top: 50%; transform: translateY(-50%);  -webkit-transform: translateY(-50%); text-align:center;}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li img {
  max-width: 90%;
  max-height:90%;
  }

@media screen and (max-width: 600px) {
  h1 {
    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  .callbacks_nav {
    top: 47%;
    }
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="callbacks_container">
      <ul class="rslides" id="slider4">
        <li><img src="http://prodigital.com.br/wp-content/uploads/2014/03/Relogio-antigo-closeup.jpg"alt=""></li>
        <li><img src="http://www.robsonpiresxerife.com/blog/wp-content/uploads/2012/01/relogio-111.jpg"alt=""></li>
        <li><img src="http://relogiolandia.com/files/artigos/relogio-bolso.jpg"alt=""></li>

      </ul>
    </div>
    
asked by anonymous 17.11.2014 / 05:23

2 answers

5

Explanation:

Well your solution can simply be solved by using the keyup event directly applied to the body of your document and checking if the key that the user clicked was ← [keyCode: 37] or → [keyCode: 39] this way, below:

Code:

$('body').keyup(function(e){
  const KEY_LEFT  = 37;
  const KEY_RIGHT = 39;
  switch(e.keyCode){
    case KEY_LEFT  : {
      $('.next').click(); //sendo o "inverso" como você disse
      break;
    }
    case KEY_RIGHT : {
      $('.prev').click(); //sendo o "inverso" como você disse
      break;
    }
  }
});

Animation:

But apparently you want the image to "go left" or "go right" which implies that you want the user to notice that the image has tended to go this way, so you would need an animation ( similar to the one used by default in the photo gallery on a smartphone), then you can use jQuery .animate ():

$('body').keyup(function(e){
    const KEY_LEFT  = 37;
    const KEY_RIGHT = 39;
    switch(e.keyCode){
        case KEY_LEFT  : {
            animationSpeed = 100; //mude a velocidade aqui
            setTimeout(function(){
                $('.next').click(); //passa para a próxima imagem
            }, animationSpeed);
            $('.callbacks_container li img').addClass('relativepos'); //possibilita a img a se mover com o left
            $('.callbacks_container li img').animate({
              left: "-100%"
              }, animationSpeed, function() {
                $('.callbacks_container li img').attr('style', 'left: 100%;'); //força a imagem a surgir da direita
                $('.callbacks_container li img').animate({
                    left: "0%"
                  }, animationSpeed);                          
            });
            break;
        }
        case KEY_RIGHT : {
            animationSpeed = 100; //mude a velocidade aqui
            setTimeout(function(){
                $('.prev').click(); //vai para a imagem anterior
            }, animationSpeed);
            $('.callbacks_container li img').addClass('relativepos'); //possibilita a imagem a mover-se com o left
            $('.callbacks_container li img').animate({
              left: "100%"
              }, animationSpeed, function() {
                $('.callbacks_container li img').attr('style', 'left: -100%;'); //força a imagem a surgir da esquerda
                $('.callbacks_container li img').animate({
                    left: "0%"
                  }, animationSpeed);
            });
            break;
        }
    }
});

Example:

$('body').keyup(function(e){
    const KEY_LEFT  = 37;
    const KEY_RIGHT = 39;
    switch(e.keyCode){
        case KEY_LEFT  : {
            animationSpeed = 100; //mude a velocidade aqui
            setTimeout(function(){
                $('.next').click(); //passa para a próxima imagem
            }, animationSpeed);
            $('.callbacks_container li img').addClass('relativepos'); //possibilita a img a se mover com o left
            $('.callbacks_container li img').animate({
              left: "-100%"
              }, animationSpeed, function() {
                $('.callbacks_container li img').attr('style', 'left: 100%;'); //força a imagem a surgir da direita
                $('.callbacks_container li img').animate({
                    left: "0%"
                  }, animationSpeed);                          
            });
            break;
        }
        case KEY_RIGHT : {
            animationSpeed = 100; //mude a velocidade aqui
            setTimeout(function(){
                $('.prev').click(); //vai para a imagem anterior
            }, animationSpeed);
            $('.callbacks_container li img').addClass('relativepos'); //possibilita a imagem a mover-se com o left
            $('.callbacks_container li img').animate({
              left: "100%"
              }, animationSpeed, function() {
                $('.callbacks_container li img').attr('style', 'left: -100%;'); //força a imagem a surgir da esquerda
                $('.callbacks_container li img').animate({
                    left: "0%"
                  }, animationSpeed);
            });
            break;
        }
    }
});


(function ($, window, i) {
  $.fn.responsiveSlides = function (options) {

    // Default settings
    var settings = $.extend({
      "auto": true,             // Boolean: Animate automatically, true or false
      "speed": 500,             // Integer: Speed of the transition, in milliseconds
      "timeout": 4000,          // Integer: Time between slide transitions, in milliseconds
      "pager": false,           // Boolean: Show pager, true or false
      "nav": false,             // Boolean: Show navigation, true or false
      "random": false,          // Boolean: Randomize the order of the slides, true or false
      "pause": false,           // Boolean: Pause on hover, true or false
      "pauseControls": true,    // Boolean: Pause when hovering controls, true or false
      "prevText": "Previous",   // String: Text for the "previous" button
      "nextText": "Next",       // String: Text for the "next" button
      "maxwidth": "",           // Integer: Max-width of the slideshow, in pixels
      "navContainer": "",       // Selector: Where auto generated controls should be appended to, default is after the <ul>
      "manualControls": "",     // Selector: Declare custom pager navigation
      "namespace": "rslides",   // String: change the default namespace used
      "before": $.noop,         // Function: Before callback
      "after": $.noop           // Function: After callback
    }, options);

    return this.each(function () {

      // Index for namespacing
      i++;

      var $this = $(this),

        // Local variables
        vendor,
        selectTab,
        startCycle,
        restartCycle,
        rotate,
        $tabs,

        // Helpers
        index = 0,
        $slide = $this.children(),
        length = $slide.size(),
        fadeTime = parseFloat(settings.speed),
        waitTime = parseFloat(settings.timeout),
        maxw = parseFloat(settings.maxwidth),

        // Namespacing
        namespace = settings.namespace,
        namespaceIdx = namespace + i,

        // Classes
        navClass = namespace + "_nav " + namespaceIdx + "_nav",
        activeClass = namespace + "_here",
        visibleClass = namespaceIdx + "_on",
        slideClassPrefix = namespaceIdx + "_s",

        // Pager
        $pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),

        // Styles for visible and hidden slides
        visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
        hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},

        // Detect transition support
        supportsTransitions = (function () {
          var docBody = document.body || document.documentElement;
          var styles = docBody.style;
          var prop = "transition";
          if (typeof styles[prop] === "string") {
            return true;
          }
          // Tests for vendor specific prop
          vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
          prop = prop.charAt(0).toUpperCase() + prop.substr(1);
          var i;
          for (i = 0; i < vendor.length; i++) {
            if (typeof styles[vendor[i] + prop] === "string") {
              return true;
            }
          }
          return false;
        })(),

        // Fading animation
        slideTo = function (idx) {
          settings.before(idx);
          // If CSS3 transitions are supported
          if (supportsTransitions) {
            $slide
              .removeClass(visibleClass)
              .css(hidden)
              .eq(idx)
              .addClass(visibleClass)
              .css(visible);
            index = idx;
            setTimeout(function () {
              settings.after(idx);
            }, fadeTime);
          // If not, use jQuery fallback
          } else {
            $slide
              .stop()
              .fadeOut(fadeTime, function () {
                $(this)
                  .removeClass(visibleClass)
                  .css(hidden)
                  .css("opacity", 1);
              })
              .eq(idx)
              .fadeIn(fadeTime, function () {
                $(this)
                  .addClass(visibleClass)
                  .css(visible);
                settings.after(idx);
                index = idx;
              });
          }
        };

      // Random order
      if (settings.random) {
        $slide.sort(function () {
          return (Math.round(Math.random()) - 0.5);
        });
        $this
          .empty()
          .append($slide);
      }

      // Add ID's to each slide
      $slide.each(function (i) {
        this.id = slideClassPrefix + i;
      });

      // Add max-width and classes
      $this.addClass(namespace + " " + namespaceIdx);
      if (options && options.maxwidth) {
        $this.css("max-width", maxw);
      }

      // Hide all slides, then show first one
      $slide
        .hide()
        .css(hidden)
        .eq(0)
        .addClass(visibleClass)
        .css(visible)
        .show();

      // CSS transitions
      if (supportsTransitions) {
        $slide
          .show()
          .css({
            // -ms prefix isn't needed as IE10 uses prefix free version
            "-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
            "-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
            "-o-transition": "opacity " + fadeTime + "ms ease-in-out",
            "transition": "opacity " + fadeTime + "ms ease-in-out"
          });
      }

      // Only run if there's more than one slide
      if ($slide.size() > 1) {

        // Make sure the timeout is at least 100ms longer than the fade
        if (waitTime < fadeTime + 100) {
          return;
        }

        // Pager
        if (settings.pager && !settings.manualControls) {
          var tabMarkup = [];
          $slide.each(function (i) {
            var n = i + 1;
            tabMarkup +=
              "<li>" +
              "<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
              "</li>";
          });
          $pager.append(tabMarkup);

          // Inject pager
          if (options.navContainer) {
            $(settings.navContainer).append($pager);
          } else {
            $this.after($pager);
          }
        }

        // Manual pager controls
        if (settings.manualControls) {
          $pager = $(settings.manualControls);
          $pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
        }

        // Add pager slide class prefixes
        if (settings.pager || settings.manualControls) {
          $pager.find('li').each(function (i) {
            $(this).addClass(slideClassPrefix + (i + 1));
          });
        }

        // If we have a pager, we need to set up the selectTab function
        if (settings.pager || settings.manualControls) {
          $tabs = $pager.find('a');

          // Select pager item
          selectTab = function (idx) {
            $tabs
              .closest("li")
              .removeClass(activeClass)
              .eq(idx)
              .addClass(activeClass);
          };
        }

        // Auto cycle
        if (settings.auto) {

          startCycle = function () {
            rotate = setInterval(function () {

              // Clear the event queue
              $slide.stop(true, true);

              var idx = index + 1 < length ? index + 1 : 0;

              // Remove active state and set new if pager is set
              if (settings.pager || settings.manualControls) {
                selectTab(idx);
              }

              slideTo(idx);
            }, waitTime);
          };

          // Init cycle
          startCycle();
        }

        // Restarting cycle
        restartCycle = function () {
          if (settings.auto) {
            // Stop
            clearInterval(rotate);
            // Restart
            startCycle();
          }
        };

        // Pause on hover
        if (settings.pause) {
          $this.hover(function () {
            clearInterval(rotate);
          }, function () {
            restartCycle();
          });
        }

        // Pager click event handler
        if (settings.pager || settings.manualControls) {
          $tabs.bind("click", function (e) {
            e.preventDefault();

            if (!settings.pauseControls) {
              restartCycle();
            }

            // Get index of clicked tab
            var idx = $tabs.index(this);

            // Break if element is already active or currently animated
            if (index === idx || $("." + visibleClass).queue('fx').length) {
              return;
            }

            // Remove active state from old tab and set new one
            selectTab(idx);

            // Do the animation
            slideTo(idx);
          })
            .eq(0)
            .closest("li")
            .addClass(activeClass);

          // Pause when hovering pager
          if (settings.pauseControls) {
            $tabs.hover(function () {
              clearInterval(rotate);
            }, function () {
              restartCycle();
            });
          }
        }

        // Navigation
        if (settings.nav) {
          var navMarkup =
            "<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
            "<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";

          // Inject navigation
          if (options.navContainer) {
            $(settings.navContainer).append(navMarkup);
          } else {
            $this.after(navMarkup);
          }

          var $trigger = $("." + namespaceIdx + "_nav"),
            $prev = $trigger.filter(".prev");

          // Click event handler
          $trigger.bind("click", function (e) {
            e.preventDefault();

            var $visibleClass = $("." + visibleClass);

            // Prevent clicking if currently animated
            if ($visibleClass.queue('fx').length) {
              return;
            }

            //  Adds active class during slide animation
            //  $(this)
            //    .addClass(namespace + "_active")
            //    .delay(fadeTime)
            //    .queue(function (next) {
            //      $(this).removeClass(namespace + "_active");
            //      next();
            //  });

            // Determine where to slide
            var idx = $slide.index($visibleClass),
              prevIdx = idx - 1,
              nextIdx = idx + 1 < length ? index + 1 : 0;

            // Go to slide
            slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
            if (settings.pager || settings.manualControls) {
              selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
            }

            if (!settings.pauseControls) {
              restartCycle();
            }
          });

          // Pause when hovering navigation
          if (settings.pauseControls) {
            $trigger.hover(function () {
              clearInterval(rotate);
            }, function () {
              restartCycle();
            });
          }
        }

      }

      // Max-width fallback
      if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
        var widthSupport = function () {
          $this.css("width", "100%");
          if ($this.width() > maxw) {
            $this.css("width", maxw);
          }
        };

        // Init fallback
        widthSupport();
        $(window).bind("resize", function () {
          widthSupport();
        });
      }

    });

  };
})(jQuery, this, 0);




    // You can also use "$(window).load(function() {"
    $(function () {
      // Slideshow 4
      $("#slider4").responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
        speed: 0,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });

    });
* {
  margin: 0;
  padding: 0;
}

.relativepos {
  position: relative !important;
}









/* Callback example */


.callbacks_container {
  position: relative;
  width: 100%; height:520px; background:#C39
  }

.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }





.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("http://i.imgur.com/lWEau8H.gif") no-repeat left top;
  margin-top: -45px;
  }

.callbacks_nav:active {
  opacity: 1.0;
  }

.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }


/*! BOX DO SLIDE */

.rslides {width:100%; position: relative; top: 50%; transform: translateY(-50%);  -webkit-transform: translateY(-50%); text-align:center;}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }



.rslides li img {
  max-width: 90%;
  max-height:90%;
  }


@media screen and (max-width: 600px) {
  h1 {
    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  .callbacks_nav {
    top: 47%;
    }
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="callbacks_container">
      <ul class="rslides" id="slider4">
        <li><img src="http://prodigital.com.br/wp-content/uploads/2014/03/Relogio-antigo-closeup.jpg"alt=""></li>
        <li><img src="http://www.robsonpiresxerife.com/blog/wp-content/uploads/2012/01/relogio-111.jpg"alt=""></li>
        <li><img src="http://relogiolandia.com/files/artigos/relogio-bolso.jpg"alt=""></li>

      </ul>
    </div>

Observations:

You have to add the relativepos class in your CSS that I created so that the image moves by changing the left attribute:

.relativepos {
  position: relative !important;
}
    
17.11.2014 / 11:34
0

Friend a cool way to do is to use the cycle plugin and add the KEY code. like this:

/ ACTIVATE THE KEYBOARD KEYS TO MOVE THE SLIDE

$('body').keyup(function(e){
    const KEY_LEFT  = 37;
    const KEY_RIGHT = 39;
    switch(e.keyCode){
    case KEY_LEFT  : {
        $('.prev').click(); 
    break;
}

    case KEY_RIGHT : {
        $('.next').click(); 
    break;
        }
    }
});



$('.ctn-food').cycle({

    fx: 'scrollHorz',
    timeout: 0,
    prev:".prev",
    next:".next",
    speed: 300,

    containerResize: 0,
    slideResize: 0,
    fit: 1,

});


$('.ctn-table').cycle({

    fx: 'fade',
    timeout: 0,
    prev:".prev",
    next:".next",
    speed: 500,


    containerResize:0,
    slideResize: 0,
    fit:1


});
    
16.12.2015 / 17:07