将DragScroll添加到滑块

Question

¡我有3个部分的滑块，其工作方式自动和点击数，一切都很好，但我想添加一个dragscroll移动，但我没有从哪里开始的线索，继承人的代码

//almacenar slider en una variable 
 
var slider = $('#slider'); 
 
//almacenar botones 
 
var siguiente = $('#btn-next'); 
 
var anterior = $('#btn-prev'); 
 

 
//mover ultima imagen al primer lugar 
 
$('#slider section:last').insertBefore('#slider section:first'); 
 
//mostrar la primera imagen con margen de -100% 
 
slider.css('margin-left', '-'+100+'%'); 
 

 
function moverD() { 
 
\t slider.animate({marginLeft:'-'+200+'%'}, 700, function(){ 
 
\t \t $('#slider section:first').insertAfter('#slider section:last'); 
 
\t \t slider.css('margin-left', '-'+100+'%'); 
 
\t }); 
 
} 
 

 
function moverI() { 
 
\t slider.animate({marginLeft:0}, 700, function(){ 
 
\t \t $('#slider section:last').insertBefore('#slider section:first'); 
 
\t \t slider.css('margin-left', '-'+100+'%'); 
 
\t }); 
 
} 
 

 
function autoplay() { 
 
    interval = setInterval(function(){ 
 
     moverD(); 
 
    }, 5000); 
 
} 
 

 
siguiente.on('click',function() { 
 
    moverD(); 
 
    clearInterval(interval); 
 
    autoplay(); 
 
}); 
 

 
anterior.on('click',function() { 
 
    moverI(); 
 
    clearInterval(interval); 
 
    autoplay(); 
 
}); 
 

 

 
autoplay();

#principal{ 
 
\t position: relative; 
 
\t height: 300px; 
 
\t width: 300px; 
 
\t overflow: hidden; 
 
\t border-bottom: 6px solid #80d443; 
 
\t border-top: 6px solid #80d443; 
 
} 
 
#btn-prev, #btn-next{ 
 
\t position: absolute; 
 
\t text-shadow: 2px 2px 1px black; 
 
\t cursor: pointer; 
 
\t color: white; 
 
\t font-size: 30px; 
 
\t z-index: 80; 
 
\t top: 50%; 
 
\t font-weight: bold; 
 
} 
 
#btn-prev{ 
 
\t left: 1%; 
 
} 
 
#btn-next{ 
 
\t right: 1%; 
 
} 
 
#slider{ 
 
\t display: flex; 
 
\t width: 900px; 
 
\t height: 300px; 
 
} 
 
section{ 
 
\t position: relative; 
 
\t margin: 0 auto; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 
#diseño{ 
 
background: blue; 
 
} 
 
#solucion{ 
 
background: red; 
 
} 
 
#entrenamiento{ 
 
background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="content" id="principal"> 
 
    <section class="slider" id="slider"> 
 
    <section id="diseño"> 
 
    </section> 
 
    <section id="solucion"> 
 
    </section> 
 
    <section id="entrenamiento"> 
 
    </section> 
 
    </section> 
 
    <div id="btn-prev" class="fa fa-angle-left" aria-hidden="true" data-stellar-ratio="1"><</div> 
 
    <div id="btn-next" class="fa fa-angle-right" aria-hidden="true" data-stellar-ratio="1">></div> 
 
</section>

任何例子或暗示将是有益的，在此先感谢：d

我想是这样的，有我停止

$(function() { 
 
    var slides = $('#slider section').length; 
 
    var slideWidth = $('#slider').width(); 
 
    var min = 0; 
 
    var max = -((slides - 1) * slideWidth); 
 

 
    $("#slider").width(slides*slideWidth).draggable({ 
 
     axis: 'x', 
 
     drag: function (event, ui) { 
 
     if (ui.position.left > min) ui.position.left = min; 
 
      if (ui.position.left < max) ui.position.left = max; 
 
     } 
 
    }); 
 
});

编辑：

我设法使它工作的阻力作用，但我有很多问题，在这里你可以看到DEMO https://jsfiddle.net/visiond/9j3jLann/8/

Answer 1

我的情况下，任一选项添加第二个答案适合OP更好或那些在未来。

这是使用jQuery和slick.js

HTML

<section class="slider"> 
    <div><img src="http://placeholder.of.today/300x300/12ec14/1844d"></div> 
    <div ><img src="http://placeholder.of.today/300x300/ff0000/1844d"></div> 
     <div ><img src="http://placeholder.of.today/300x300/0095ff/1844d"></div> 
</section> 

CSS

.slider { 
    max-width: 300px; 
    margin: 0 auto; 
} 

.slick-slide { 
    color: white; 
    padding: 0; 
    margin: 0; 
    text-align: center; 

    img { display: inline-block; } 
} 

.slick-prev:before, 
.slick-next:before { 
    color: black;  
} 

.slick-prev, .slick-next { 
    font-size: 0; 
    line-height: 0; 
    position: absolute; 
    top: 50%; 
    display: block; 
    width: 20px; 
    height: 20px; 
    z-index: 3; 
} 
.slick-next { 
    right: 5px; 
} 
.slick-prev { 
    left: 5px; 
} 

JS

$(".slider").slick({ 

    autoplay: true, 
    dots: true, 
    customPaging : function(slider, i) { 
    }, 

    responsive: [{ 
     breakpoint: 500, 
     settings: { 
      dots: false, 
      arrows: false, 
      infinite: false, 
      slidesToShow: 1, 
      slidesToScroll: 1 
     } 
    }] 
}); 

Codepen上的演示。 https://codepen.io/norcaljohnny/pen/NbpPvL

Answer 2

你非常接近。

$(function() { 
    var slides = $('#slider ul').children().length; 
    var slideWidth = $('#slider').width(); 
    var min = 0; 
    var max = -((slides - 1) * slideWidth); 

    $("#slider ul").width(slides*slideWidth).draggable({ 
     axis: 'x', 
     drag: function (event, ui) { 
      if (ui.position.left > min) ui.position.left = min; 
      if (ui.position.left < max) ui.position.left = max; 
     } 
    }); 
}); 

DEMO http://jsfiddle.net/norcaljohnny/k71jugLk/