¡こんにちは!私は自動作品3つのセクションのスライダーを、持っているとonlick、すべてが正常であるが、私は、モバイル用のdragscrollを追加したいが、私は開始する場所の手掛かりを持っていない、HERESにコードスライダーに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;
}
});
});
EDIT:
私はそれがドラッグ機能を動作させるために管理し、私は多くの問題を抱えている、ここであなたはあなたが非常に接近しているDEMO https://jsfiddle.net/visiond/9j3jLann/8/
私はそのコードで様々な問題を抱えているが、ここでのデモは、私はすぐに少しのために出てきたことを見ていきますhttps://jsfiddle.net/visiond/9j3jLann/8/ –
です。私はいくつかの軽微な誤りが余分な終わりの言葉を好むことに気付きました。 –
https://jsfiddle.net/visiond/9j3jLann/9/また、これは私のデモとは違って、変わっています。 –