如何使触摸滑块响应

Question

I want to change my gallery into touch slider for mobile devices only. For achieving my goal , i create two sections, i for desktop and another for mobile.i am using display property on media query. but my slider is not responsive.i applied width:100%, but it's still not working as well. i want to make it responsive and i want to add next or previous on slider as well.

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

Answer 1

As what I said in the comment, you can achieve what you want by duplicating all the images into another section, show/hide one of them based on the break point, and apply the carousel library ( https://owlcarousel2.github.io/OwlCarousel2/ ) on mobile.

Use the carousel library instead of build one yourself saves you time and effort, as Touch and Drag support is not easy to do.

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>

This markup enables you to only show carousel section when the screen < 768px, and only show gallery section otherwise.

JavaScript

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

This will turn the carousel section into touch-and-drag-enabled carousel. You can read its documentation here: https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

Result

On small screen:

On larger screen:

fiddle: http://jsfiddle.net/aq9Laaew/243804/