如何使触摸滑块响应

时间：2018-10-03 14:04:38

标签： javascript jquery css bootstrap-4

我只想将图库更改为仅适用于移动设备的触摸滑块。为了实现我的目标，我创建了两个部分，一个用于桌面，另一个用于移动。我正在使用媒体查询的显示属性。但是我的滑块没有响应。我应用了宽度：100％，但仍然无法正常工作。我想使其具有响应性，我也想在滑块上添加下一个或上一个。 

$(window).load(function(){
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"),
      imgSlide: $(".slide-image")
    },

    slideWidth: $('#slider').width(),
    touchstartx: undefined,
    touchmovex: undefined,
    movex: undefined,
    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.touchstartx =  event.originalEvent.touches[0].pageX;

      // 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.index*this.slideWidth + (this.touchstartx - 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)');
      }
      if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving.
        this.el.imgSlide.css('transform','translate3d(-' + panx + 'px,0,0)');
      }
    },

    end: function(event) {
      // Calculate the distance swiped.
      var absMove = Math.abs(this.index*this.slideWidth - this.movex);
      // Calculate the index. All other calculations are based on the index.
      if (absMove > this.slideWidth/2 || this.longTouch === false) {
        if (this.movex > this.index*this.slideWidth && this.index < 2) {
          this.index++;
        } else if (this.movex < this.index*this.slideWidth && this.index > 0) {
          this.index--;
        }
      }      
      // Move and animate the elements.
      this.el.holder.addClass('animate').css('transform', 'translate3d(-' + this.index*this.slideWidth + 'px,0,0)');
      this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 100-this.index*50 + 'px,0,0)');

    }

  };

  slider.init();
}
});
div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
	background-color:white;
}


/* touch screen carousel */

.slider-wrap {
display:none;
}
@media only screen and (max-width: 768px) {
section{
display:none;
}
.animate {
  transition: transform 0.3s ease-out;
}

.slider-wrap {
  display:block;
}

.slider {
 
  overflow: hidden;
}

.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%, 100%);
  /* Defines the y and x intervals to snap to when scrolling. */
}

.holder {
  width: 300%;
  max-height: 500px;
  height: auto;
  overflow-y: hidden;
}

.slide-wrapper {

  width: 33.333%;
  height: 100%;
  float: left;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.slide {
  height: 100%;
  position: relative;
}

.temp {
  position: absolute;
  z-index: 1;
  bottom: 15px;
  left: 15px;
}

.slide img {
  position: absolute;
  z-index: 0;
  transform: translatex(-100px);
}

.slide:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
}

.slide div {
  z-index: 0;
}
}
<!DOCTYPE html>
 <html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="slider-wrap">
  <div class="slider" id="slider">
    <div class="holder">
      <div class="slide-wrapper">
        <div class="slide"><img class="slide-image" src="images/homepage-banner-15.jpg" width="100%" /></div>
        <span class="desc"><a href="/signing-board/">Signing Boards</a></span>
      </div>
      <div class="slide-wrapper">
        <div class="slide"><img class="slide-image" src="images/homepage-banner-12.jpg" width="100%" /></div>
        <span class="desc"><a href="/floating-picture-frames/">Fine Art Frame</a></span>
      </div>
      <div class="slide-wrapper">
        <div class="slide"><img class="slide-image" src="images/homepage-banner-14.jpg" width="100%"/></div>
        <span class="desc">><a href="/paper-samples/">Paper Samples</a></span>
      </div>
    </div>
	<div class="previous"></div>
    <div class="next"></div>    
 
  </div>
</div>	
	  <section class="py-5 mb-3"> 
	  <div class="container">
		<div class="row sectorGap justify-content-center">
		  <div class="col gallery">
            <a href="/signing-board/"><img src="images/homepage-banner-15.jpg" width="100%" class="myImage"/></a>
			<div class="desc"><h2><a href="/signing-board/">Signing Boards</a></h2></div>
          </div>
          <div class="col gallery">
		    <a href="/floating-picture-frames/"><img src="images/homepage-banner-12.jpg" width="100%" class="myImage"/></a>
            <div class="desc"><h2><a href="/floating-picture-frames/">Fine Art Frame</a></h2></div>
		  </div>
		  <div class="col gallery">
		    <a href="/paper-samples/"><img src="images/homepage-banner-14.jpg" width="100%" class="myImage"/></a>
            <div class="desc"><h2><a href="/paper-samples/">Paper Samples</a></h2></div>
		  </div>
		</div>  
	  </div>
    </section>
	</body>
  </html>

1 个答案:

答案 0 :(得分：0)

正如我在评论中所说，您可以通过将所有图像复制到另一部分，根据断点显示/隐藏其中一个图像，并应用轮播库（https://owlcarousel2.github.io/OwlCarousel2/）来实现所需的功能。在手机上。

使用轮播库而不是自己构建轮播库可以节省您的时间和精力，因为“触摸和拖动”支持并不容易。

HTML 

<div class="container">
    <!-- Display as block until md breakpoint (768px) -->
    <section class="owl-carousel owl-theme d-md-none">
        <div class="item">
            <img class="img-fluid" alt="image 1" />
        </div>
        <div class="item">
            <img class="img-fluid" alt="image 2" />
        </div>
        <div class="item">
            <img class="img-fluid" alt="image 3" />
        </div>
    </section>

    <!-- Display none until md breakpoint (768px), as block after -->
    <section class="gallery d-none d-md-block">
        <div class="row">
            <div class="col">
                <img class="img-fluid" alt="image 1" />
            </div>
            <div class="col">
                <img class="img-fluid" alt="image 2" />
            </div>
            <div class="col">
                <img class="img-fluid" alt="image 3" />
            </div>
        </div>
    </section>
</div>

此标记使您只能在屏幕<768px时显示轮播区域，否则仅显示图库区域。

JavaScript 

$(function() {
    $('.owl-carousel').owlCarousel({
        margin: 10,
        nav: true,
        items: 1
    });
});

这会将轮播部分变成启用触摸和拖动功能的轮播。您可以在这里阅读其文档：https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

结果

在小屏幕上： enter image description here

在大屏幕上： enter image description here

小提琴： http://jsfiddle.net/aq9Laaew/243804/

相关问题
最新问题