Question

我正在尝试根据http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/构建一个滑块。我的目标是创建一个水平的，仅限移动设备的滑块，允许您在注册过程中的步骤之间来回滑动。

代码大部分都有效，但滑块只会在每次触摸时移动，我不确定原因。

http://codepen.io/anon/pen/zKhao

HTML ：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="visible-xs mobile-tabs">
  <div class="slider-wrap">
    <div class="slider" id="slider">
      <div class="holder">
        <div class="slide-wrapper">
          <h4 class="complete"><a href="Step0">Before you begin</a></h4>
        </div>
        <div class="slide-wrapper">
          <h4 class="complete"><a href="Step1">1. Terms &amp; Conditions</a></h4>
        </div>
        <div class="slide-wrapper">
          <h4 class="current">2. Teams</h4>
        </div>
        <div class="slide-wrapper">
          <h4>3. Add-Ons</h4>
        </div>
        <div class="slide-wrapper">
          <h4>4. Review &amp; Submit</h4>
        </div>
      </div>
    </div>
  </div>
</div>

CSS ：

a
{
    color: #5fa4db;
    text-decoration: none;
}

.mobile-tabs
{
    height: 45px;
    overflow: hidden;
    border-bottom: 1px solid #f1f2f4;
    white-space: nowrap;
    margin-bottom: 10px;
}

.mobile-tabs h4
{
  color: #9fa9b2;
  display: inline-block;
  padding-right: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 18px;
}
.mobile-tabs h4.current
{
  border-bottom: 5px solid #5fa4db;
  color: #0f2034;
}

.mobile-tabs h4.complete
{
  color: #5fa4db;
}

    /* CSS for mobile tab slider.
    Source: http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
    */

.mobile-tabs .animate {
  transition: transform 0.3s ease-out;
}

.mobile-tabs .slider-wrap {
  width: 100%;
  position: absolute;
}

.mobile-tabs .slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mobile-tabs .ms-touch.slider {
  overflow-x: scroll;
  overflow-y: hidden;

  -ms-overflow-style: none;
  /* Hides the scrollbar. */

  -ms-scroll-chaining: none;
  /* Prevents Metro from swiping to the next tab or app. */

  -ms-scroll-snap-type: mandatory;
  /* Forces a snap scroll behavior on your images. */

  -ms-scroll-snap-points-x: snapInterval(0%, 1%);
  /* Defines the y and x intervals to snap to when scrolling. */
}

.mobile-tabs .holder {
  width: 300%;
  overflow-y: hidden;
}

.mobile-tabs .slide-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}

.mobile-tabs .slide div {
  width: 300px;
  height: 500px;
  z-index: 0;
}

的JavaScript ：

if (navigator.msMaxTouchPoints) {

    $('#slider').addClass('ms-touch');

    $('#slider').on('scroll', function () {
        $('.slide-image').css('transform', 'translate3d(-' + (100 - $(this).scrollLeft() / 6) + 'px,0,0)');
    });

} else {

    var slider = {

        el: {
            slider: $("#slider"),
            holder: $(".holder")
        },

        slideWidth: $('#slider').width(),
        touchstartx: undefined,
        touchmovex: undefined,
        movex: 0,
        index: 0,
        longTouch: undefined,

        init: function () {
            this.bindUIEvents();
        },

        bindUIEvents: function () {

            this.el.holder.on("touchstart", function (event) {
                slider.start(event);
            });

            this.el.holder.on("touchmove", function (event) {
                slider.move(event);
            });

            this.el.holder.on("touchend", function (event) {
                slider.end(event);
            });

        },

        start: function (event) {
            // Test for flick.
            this.longTouch = false;
            setTimeout(function () {
                window.slider.longTouch = true;
            }, 250);

            // Get the original touch position.
            this.oldx = this.movex;

            // The movement gets all janky if there's a transition on the elements.
            $('.animate').removeClass('animate');
        },

        move: function (event) {
            // Continuously return touch position.
            this.touchmovex = event.originalEvent.touches[0].pageX;
            // Calculate distance to translate holder.
            this.movex = -this.oldx - this.touchmovex;
            // Defines the speed the images should move at.
            var panx = 100 - this.movex / 6;
            if (this.movex < 600) { // Makes the holder stop moving when there is no more content.
                this.el.holder.css('transform', 'translate3d(-' + this.movex + 'px,0,0)');
            }
        },

        end: function (event) {
        }

    };

    slider.init();
}

为了模拟问题，您必须在移动设备上查看代码（或使用Chrome的移动仿真）并尝试来回滑动滑块。它会移动，但只会在你试图滑动它的时候。

我完全迷失了，任何帮助都会受到赞赏。

Answer 1

这本身并不是一个真正的答案，但我决定将整个事情抛弃并使用jquery UI的Draggable功能来完成我需要做的事情。

http://jqueryui.com/draggable/#constrain-movement

移动滑块仅响应所有其他触摸

1 个答案: