Question

？你好！我有一个3个部分的滑块，它工作自动和onlick，一切都很好但我想添加一个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() {
	slider.animate({marginLeft:'-'+200+'%'}, 700, function(){
		$('#slider section:first').insertAfter('#slider section:last');
		slider.css('margin-left', '-'+100+'%');
	});
}

function moverI() {
	slider.animate({marginLeft:0}, 700, function(){
		$('#slider section:last').insertBefore('#slider section:first');
		slider.css('margin-left', '-'+100+'%');
	});
}

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{
	position: relative;
	height: 300px;
	width: 300px;
	overflow: hidden;
	border-bottom: 6px solid #80d443;
	border-top: 6px solid #80d443;
}
#btn-prev, #btn-next{
	position: absolute;
	text-shadow: 2px 2px 1px black;
	cursor: pointer;
	color: white;
	font-size: 30px;
	z-index: 80;
	top: 50%;
	font-weight: bold;
}
#btn-prev{
	left: 1%;
}
#btn-next{
	right: 1%;
}
#slider{ 
	display: flex;
	width: 900px;
	height: 300px;
}
section{
	position: relative;
	margin: 0 auto;
	width: 100%;
	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;
        }
    });
});

编辑：

我设法让它在拖动功能上运行，但是我遇到了很多问题，在这里你可以看到演示https://jsfiddle.net/visiond/9j3jLann/8/

Answer 1

你非常接近。

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

Answer 2

我正在添加第二个答案，以防任何一个选项更适合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上的DEMO。 https://codepen.io/norcaljohnny/pen/NbpPvL

将DragScroll添加到滑块

2 个答案: