jQuery Slider - 自動再生オプションを追加する

jQueryスライドショープラグインを使用していますが、自動再生のオプションはありません。現在、スライドをトリガーする唯一の方法は、左右の矢印をクリックすることです。jQuery Slider - 自動再生オプションを追加する

誰でも解決できますか？私はいくつかの調査をしましたが、まだ解決策を思いついた人を見つけることができず、元の開発者はもはやコーディングしていないようです。

以下は、codepenで使用しているスライダーです。

(function() { 
 
    var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem; 
 

 
    carouselContent = $(".carousel__content"); 
 
    carouselIndex = 0; 
 
    carouselLength = carouselContent.children().length; 
 
    isAnimating = false; 
 
    itemWidth = 100/carouselLength; 
 
    firstItem = $(carouselContent.children()[0]); 
 
    lastItem = $(carouselContent.children()[carouselLength - 1]); 
 
    firstClone = null; 
 
    lastClone = null; 
 
    carouselContent.css("width", carouselLength * 100 + "%"); 
 
    carouselContent.transition({ 
 
    x: (carouselIndex * -itemWidth) + "%" 
 
    }, 0); 
 
    $.each(carouselContent.children(), function() { 
 
    return $(this).css("width", itemWidth + "%"); 
 
    }); 
 

 
    $(".nav--left").on("click", function() { 
 
    if (isAnimating) { 
 
     return; 
 
    } 
 
    isAnimating = true; 
 
    carouselIndex--; 
 
    if (carouselIndex === -1) { 
 
     lastItem.prependTo(carouselContent); 
 
     carouselContent.transition({ 
 
     x: ((carouselIndex + 2) * -itemWidth) + "%" 
 
     }, 0); 
 
     return carouselContent.transition({ 
 
     x: ((carouselIndex + 1) * -itemWidth) + "%" 
 
     }, 1000, "easeInOutExpo", function() { 
 
     carouselIndex = carouselLength - 1; 
 
     lastItem.appendTo(carouselContent); 
 
     carouselContent.transition({ 
 
      x: (carouselIndex * -itemWidth) + "%" 
 
     }, 0); 
 
     return isAnimating = false; 
 
     }); 
 
    } else { 
 
     return carouselContent.transition({ 
 
     x: (carouselIndex * -itemWidth) + "%" 
 
     }, 1000, "easeInOutExpo", function() { 
 
     return isAnimating = false; 
 
     }); 
 
    } 
 
    }); 
 

 
    $(".nav--right").on("click", function() { 
 
    if (isAnimating) { 
 
     return; 
 
    } 
 
    isAnimating = true; 
 
    carouselIndex++; 
 
    return carouselContent.transition({ 
 
     x: (carouselIndex * -itemWidth) + "%" 
 
    }, 1000, "easeInOutExpo", function() { 
 
     isAnimating = false; 
 
     if (firstClone) { 
 
     carouselIndex = 0; 
 
     carouselContent.transition({ 
 
      x: (carouselIndex * -itemWidth) + "%" 
 
     }, 0); 
 
     firstClone.remove(); 
 
     firstClone = null; 
 
     carouselLength = carouselContent.children().length; 
 
     itemWidth = 100/carouselLength; 
 
     carouselContent.css("width", carouselLength * 100 + "%"); 
 
     $.each(carouselContent.children(), function() { 
 
      return $(this).css("width", itemWidth + "%"); 
 
     }); 
 
     return; 
 
     } 
 
     if (carouselIndex === carouselLength - 1) { 
 
     carouselLength++; 
 
     itemWidth = 100/carouselLength; 
 
     firstClone = firstItem.clone(); 
 
     firstClone.addClass("clone"); 
 
     firstClone.appendTo(carouselContent); 
 
     carouselContent.css("width", carouselLength * 100 + "%"); 
 
     $.each(carouselContent.children(), function() { 
 
      return $(this).css("width", itemWidth + "%"); 
 
     }); 
 
     return carouselContent.transition({ 
 
      x: (carouselIndex * -itemWidth) + "%" 
 
     }, 0); 
 
     } 
 
    }); 
 
    }); 
 

 
}).call(this);

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body, html { 
 
    font-family: "europa-1","europa-2", sans-serif; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper { 
 
    max-width: 940px; 
 
    width: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
} 
 

 
/** 
 
* Use this wrapper only for demo purposes 
 
* So you can show the items outside the wrapper 
 
*/ 
 
.wrapper--demo { 
 
    overflow: visible; 
 
} 
 
.wrapper--demo:after, .wrapper--demo:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 800px; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 100%; 
 
    background: rgba(255, 255, 255, 0.8); 
 
    z-index: 2; 
 
} 
 
.wrapper--demo:before { 
 
    left: -800px; 
 
} 
 

 
.carousel { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.carousel .carousel__content { 
 
    width: auto; 
 
    position: relative; 
 
    overflow: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transition: translate3d(0, 0, 0); 
 
} 
 
.carousel .carousel__content .item { 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.carousel .carousel__content .item .title { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    margin: -33px 0 0 0; 
 
    padding: 0; 
 
    font-size: 3rem; 
 
    width: 100%; 
 
    text-align: center; 
 
    letter-spacing: .3rem; 
 
    color: #FFF; 
 
} 
 
.carousel .carousel__content .item .title--sub { 
 
    margin-top: 20px; 
 
    font-size: 1.2em; 
 
    opacity: .5; 
 
} 
 
.carousel .carousel__content .item img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 
.carousel .carousel__nav { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50%; 
 
    margin-top: -17px; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 
.carousel .carousel__nav .nav { 
 
    position: absolute; 
 
    top: 0; 
 
    color: #000; 
 
    background: #FFF; 
 
    padding: 8px 12px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    font-size: .8rem; 
 
    transition: padding .25s ease; 
 
} 
 
.carousel .carousel__nav .nav:hover { 
 
    padding: 8px 20px; 
 
} 
 
.carousel .carousel__nav .nav--left { 
 
    border-radius: 0px 3px 3px 0px; 
 
} 
 
.carousel .carousel__nav .nav--right { 
 
    right: 0; 
 
    border-radius: 3px 0px 0px 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script> 
 

 

 
<div class="wrapper wrapper--demo"> 
 
\t <div class="carousel"> 
 
\t \t <div class="carousel__content"> 
 
\t \t \t <div class="item"> 
 
     <p class="title">First</p> 
 
     <img src="http://placehold.it/1800x850/70AD96/FFF&text=&nbsp;" alt=""> 
 
     </div> 
 
\t \t \t <div class="item"> 
 
     <p class="title">Second</p> 
 
     <img src="http://placehold.it/1800x850/EA4E23/FFF&text=&nbsp;" alt=""> 
 
     </div> 
 
\t \t \t <div class="item"> 
 
     <p class="title">Third</p> 
 
     <img src="http://placehold.it/1800x850/9BA452/FFF&text=&nbsp;" alt=""> 
 
     </div> 
 
\t \t \t <div class="item"> 
 
     <p class="title">Fourth</p> 
 
     <img src="http://placehold.it/1800x850/472D38/FFF&text=&nbsp;" alt=""> 
 
     </div> 
 
\t \t \t <div class="item"> 
 
     <p class="title">Fifth</p> 
 
     <img src="http://placehold.it/1800x850/F77C85/FFF&text=&nbsp;" alt=""> 
 
     </div> 
 
\t \t \t <div class="item"> 
 
     <p class="title">Sixth</p> 
 
     <p class="title title--sub">Last Item</p> 
 
     <img src="http://placehold.it/1800x850/00FFAE/FFF&text=&nbsp;" alt=""> 
 
     </div> 
 
\t \t </div> 
 
    
 
    <div class="carousel__nav"> 
 
     <a href="#" class="nav nav--left">Previous</a> 
 
     <a href="#" class="nav nav--right">Next</a> 
 
    </div> 
 
    
 
\t </div> 
 
</div>

出典

2017-10-13 Matt Cook

ようこそスタックオーバーフロー - あなたを持っていいです。 [良い質問をするにはどうすればよいですか？]（https://stackoverflow.com/help/how-to-ask）と[**最小限の**完全で検証可能な例を作成する方法]（https： Stack Overflowsのコンテンツを可能な限り高いレベルに保ち、適切な答えを得るチャンスを増やすのに役立ちます。 – Axel

私の答えを確認しましたか？あなたが望むように動作するはずです！あなたが何かを見逃しているとコメントを残して自由に感じる...に関して： – Axel

感謝アクセル、魅力のように動作します！ –

使用jQueryの.click()あなたのケースで$(".nav--left").click() & $(".nav--right").click()で対応するDOM要素にユーザーのクリックを模倣します。
setIntervalを使用して、目的の「自動再生効果」を達成します。これはそれを行う必要があります

迅速かつ汚いです。 を既存のスクリプトに追加してください。このworking Forked PENで楽しくお過ごしください（下部には高度なものへのリンクもあります）。

はJavaScript：

var autoSlide = function(sDirection) { 
    sDirection === 'left' || sDirection = 'right'; 
    $('.nav--' + sDirection).click(); // ".nav--left" or ".nav--right" 
}; 

setInterval(function() { 
    autoSlide(); // with default direction: 'right' 
    // autoSlide('left') // slide left 
}, 1000); // every 1000 milliseconds

のCoffeeScript：

autoSlide = (sDirection) -> 
    sDirection == 'left' || sDirection = 'right' 
    $(".nav--#{sDirection}").click() 

setInterval(
    -> autoSlide() # with default direction: 'right' 
    # autoSlide('left') # slide left 
    1000 # every second 
)

スニペットあなたの答えを繰り返すいただきました新しいの代わりに、私は唯一の掲載！カスタマイズや一般的な機能についてご質問がありましたら、お気軽にコメントを残してください。

PEN with advanced control capabilities.

短縮バージョン（非常に不可欠に低減）：

setInterval(function() { $('.nav--right').click() }, 1000);

または他の方向および低速の半分の：

setInterval(function() { $('.nav--left').click() }, 2000);

出典

2017-10-13 00:44:47 Axel

jQuery Slider - 自動再生オプションを追加する

答えて

関連する問題