jQueryカルーセルを自動的にスライドさせる

Question

イメージスライダを作成しました。ボタンの1つをクリックするとスライドするように設定されています。しかし、今ではスライドを自動的に作成し、マウスがサイダー上を移動すると停止するように苦労しています。あなたは私に見せてもらえますか、それともどうすればいいか教えてください。おかげ

$(document).ready(function(){ 
 
    var slide_count = $(".carousel li").length; 
 
    var slide_width = $(".carousel li").width(); 
 
    var slide_height = $(".carousel li").height(); 
 
    var cont_width = slide_width * slide_count; 
 
    
 
    $(".cont").css({ height: slide_height, width: slide_width}); 
 
    $(".carousel").css({ width: cont_width, marginLeft: - slide_width }); 
 
    $(".carousel li:last-child").prependTo(".carousel"); 
 
    
 
    function next_slide(){ 
 
    $(".carousel").animate({ 
 
     left: + slide_width 
 
    }, 400, function(){ 
 
     $(".carousel li:last-child").prependTo(".carousel"); 
 
     $('.carousel').css('left', 0); 
 
    } 
 
    ); 
 
    } 
 
    
 
    function prev_slide(){ 
 
    $(".carousel").animate({ 
 
     left: - slide_width 
 
    }, 400, function(){ 
 
     $(".carousel li:first-child").appendTo(".carousel"); 
 
     $(".carousel").css("left", 0); 
 
    } 
 
    ); 
 
    } 
 
    
 
    $("#next").click(function(){ 
 
    next_slide(); 
 
    }); 
 
    $("#prev").click(function(){ 
 
    prev_slide(); 
 
    }); 
 
    
 
});

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.cont{ 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 0;/*removes white space*/ 
 
    margin: 60px auto 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.carousel{ 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    height: 100%; 
 
    max-height: 600px; 
 
} 
 

 
.carousel li{ 
 
    float: left; 
 
    width: 750px; 
 
    height: 350px; 
 
} 
 

 
.carousel li img{ 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#next{ 
 
    position: absolute; 
 
    top: 45%; 
 
    right: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: blue; 
 
    font-size: 0; 
 
    z-index: 1; 
 
} 
 

 
#prev{ 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: blue; 
 
    z-index: 1; 
 
}

<div class="cont"> 
 
    <div id="next"> 
 
    </div> 
 
    <div id="prev"> 
 
    </div> 
 
    <ul class="carousel"> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" /> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

Answer 1

あなたは、あなたのスライダー機能ごとx秒を呼び出し、マウスが上にある場合は実行しないためにそれに旗を置くsetInterval()を作成することによって、それを達成することができます。

var SECONDS_INTERVAL = 1000; // 1s 
var mouseHoverFlag = false; 

setInterval(function() { 
    if (!mouseHoverFlag) { 
     next_slide(); 
    } 
}, SECONDS_INTERVAL); 

、ユーザーがそれを含むdivの上にマウスを持っている時はいつでもtrueにそのmouseHoverFlagを変更するような

何か。あなたはsetTimeoutを使用し、それをマウスはになりますが、私はそれが賢明な重すぎる、パフォーマンスだと思うたびに殺すことができる

$('.carousel').hover(function() { 
    mouseHoverFlag = true; 
}, function() { 
    mouseHoverFlag = false; 
}); 

。

Answer 2

は、ここに私の編集されたバージョンです。自動スライドにはsetInterval関数を使用する必要があります。次に、ホバーイベントリスナーをカルーセルに追加します。ホバリングしている場合、変数preventSlideはtrueに変更され、ホバリングを停止すると変数はfalseに戻ります。これは自動スライドを意味します。

var preventSlide = false; 
$(".carousel").hover(function() { 
     preventSlide = true; 
}, function() { 
    preventSlide = false; 
}); 

setInterval(function() { 
    if (!preventSlide) 
     next_slide(); 
}, 3500); 

$(document).ready(function(){ 
 
    var slide_count = $(".carousel li").length; 
 
    var slide_width = $(".carousel li").width(); 
 
    var slide_height = $(".carousel li").height(); 
 
    var cont_width = slide_width * slide_count; 
 
    
 
    $(".cont").css({ height: slide_height, width: slide_width}); 
 
    $(".carousel").css({ width: cont_width, marginLeft: - slide_width }); 
 
    $(".carousel li:last-child").prependTo(".carousel"); 
 
    
 
    function next_slide(){ 
 
    $(".carousel").animate({ 
 
     left: + slide_width 
 
    }, 400, function(){ 
 
     $(".carousel li:last-child").prependTo(".carousel"); 
 
     $('.carousel').css('left', 0); 
 
    } 
 
    ); 
 
    } 
 
    
 
    function prev_slide(){ 
 
    $(".carousel").animate({ 
 
     left: - slide_width 
 
    }, 400, function(){ 
 
     $(".carousel li:first-child").appendTo(".carousel"); 
 
     $(".carousel").css("left", 0); 
 
    } 
 
    ); 
 
    } 
 

 
    var preventSlide = false; 
 
    $(".carousel").hover(function() { 
 
     preventSlide = true; 
 
    }, function() { 
 
     preventSlide = false; 
 
    }); 
 

 
    setInterval(function() { 
 
if (!preventSlide) 
 
     next_slide(); 
 
    }, 3500); 
 

 
    /*$("#next").click(function(){ 
 
    next_slide(); 
 
    }); 
 
    $("#prev").click(function(){ 
 
    prev_slide(); 
 
    });*/ 
 
    
 
});

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.cont{ 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 0;/*removes white space*/ 
 
    margin: 60px auto 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.carousel{ 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    height: 100%; 
 
    max-height: 600px; 
 
} 
 

 
.carousel li{ 
 
    float: left; 
 
    width: 750px; 
 
    height: 350px; 
 
} 
 

 
.carousel li img{ 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#next{ 
 
    position: absolute; 
 
    top: 45%; 
 
    right: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: blue; 
 
    font-size: 0; 
 
    z-index: 1; 
 
} 
 

 
#prev{ 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 0; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: blue; 
 
    z-index: 1; 
 
}

<div class="cont"> 
 
    <div id="next"> 
 
    </div> 
 
    <div id="prev"> 
 
    </div> 
 
    <ul class="carousel"> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" /> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

Answer 3

自動スライドには、setIntervalとclearIntervalを追加する必要があります。また、現在のアニメーションであなたがどのスライドにいるのかを計算することは良いことです。簡単に言うと、

var timer; 
var rotator = function(){ 
    nextSlide(); 
}; 
timer = setInterval(rotator, 5000); // your desired timer 
$('.carousel').hover(function(){ clearInterval(timer), function(){ timer = setInterval(rotator, 5000); }); 

あなたはコードをはるかに最適化することができますが、基本的な解決策はこうです。

Answer 4

$(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 
    }); 

check here

Answer 5

あなたはカルーセルのオプションとして時間間隔を設定することができます。ホバーで一時停止オプションを設定することもできます。

$("#myCarousel").carousel({interval: 500, pause: "hover"});