javascriptスライダーでCSSマージンを制御

JSとJqueryの新機能です。私は画像の左余白を減らして次のスライドを挿入する簡単な画像カルーセルを作成しました。javascriptスライダーでCSSマージンを制御

私はスライダーで画像カルーセルをコントロールしたいと思います。 JSスライダーでCSSの左マージンのサイズを制御するのが最善の方法だと思います。私は初心者だと言っていますので、左マージンの値をターゲットにしてスライダを正または負の方向に更新するソリューションを考え出すのは難しいです。

ex スライダを左に移動するとマージンが小さくなり、スライダが移動します。どんな助けでも大いに感謝します。

ご協力いただきありがとうございます。

イメージカルーセル用のコードを含めます。

// image slider//////////////////////// 

$(function(){ 
// config 
    var width = 720; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 

    //cache DOM 

    var $slider = $('#slider'); 
    var $sliderContainer = $slider.find('.slides'); 
    var $slides = $sliderContainer.find('.slide'); 

    var interval; 



    function startSlider(){ 
    interval = setInterval(function(){ 
     $sliderContainer.animate({'margin-left': '-=' + width}, animationSpeed, function(){ 
     currentSlide++; 
     if (currentSlide === $slides.length){ 
      currentSlide = 1; 
      $sliderContainer.css('margin-left', 0); 
     } 
     }); 
    }, pause); 
    } 

    function stopSlider(){ 
    clearInterval(interval); 
    } 

    $('#slider').on('mouseenter' , stopSlider).on('mouseleave', startSlider); 

startSlider(); 

}); 



<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="./public/assets/css/main.css"> 
    <meta charset="utf-8"> 
    <title>starter_build</title> 
    </head> 
    <body> 

    <div id = "slider"> 
     <ul class="slides"> 
     <li class="slide"><img src="public/assets/images/1.jpg" alt=""></li> 
     <li class="slide"><img src="public/assets/images/2.jpg" alt=""></li> 
     <li class="slide"><img src="public/assets/images/3.jpg" alt=""></li> 
     <li class="slide"><img src="public/assets/images/4.jpg" alt=""></li> 
     <li class="slide"><img src="public/assets/images/5.jpg" alt=""></li> 
     <li class="slide"><img src="public/assets/images/6.jpg" alt=""></li> 
     <li class="slide"><img src="public/assets/images/1.jpg" alt=""></li> 
     </ul> 
    </div> 



    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script type="text/javascript" src="./public/assets/js/scripts.js"></script> 
    </script> 
    </body> 
</html>

出典

2017-07-31 Tayler Ramsay

あなたのスライダのrange inputを使用して、ユーザーがそれを更新して、その値を得ることができます。その値をスライダの左マージンに使用します。ここではレンジ入力の値を取得し、それを使用する例は、あなたが.css()文で使用できる文字列を考え出すことです。

$(function(){ 
 
    $('input').on('change', function(){ 
 
    $('#current-margin').find('span').text($(this).val() + 'px'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" min="0" max="5040" step="720" value="0"> 
 

 
<p id="current-margin">Current margin: <span>0</span></p>

は、あなたがそのようなものを使用することができます（つまり、、$('input').val() + 'px'）、入力が変更されたときにwidth変数を更新します。

しかし、タイマーを再起動して入力値に基づいてcurrentSlideを更新するなど、タイムアウトをクリアするようなことも考慮する必要があります。

出典

2017-08-01 02:00:24 cjl750

javascriptスライダーでCSSマージンを制御

答えて

関連する問題