現在のスライドにアクティブなクラスを追加します。3次元カルーセル

Question

私は、このjsを3Dカルーセルに使用しています。そして、現在のスライドにアクティブなクラスを割り当てるとき、私は不安定です。以下は私の最近の試みです。私は他のアプローチと最も近いと思う。私は必要であれば私に知らせてください、私はそれが関連性があると思っていないので、私はCSSを含むdidnt。 https://jsfiddle.net/ubxvyh5j/6/

var carousel = $(".carousel"), 
currdeg = 0; 

$(".next").on("click", {d: "n"}, rotate); 
$(".prev").on("click", {d: "p"}, rotate); 

function rotate(e) { 
    if (e.data.d == "n") { 
     currdeg = currdeg - 120;  
    } 
    if (e.data.d == "p") { 
     currdeg = currdeg + 120; 
    } 
carousel.css({ 
    "-webkit-transform": "rotateY(" + currdeg + "deg)", 
    "-moz-transform": "rotateY(" + currdeg + "deg)", 
    "-o-transform": "rotateY(" + currdeg + "deg)", 
    "transform": "rotateY(" + currdeg + "deg)" 
    }); 
    $(this('.item')).addClass('active'); // this is what is not working 
} 

Htmlの

<div class="carousel"> 
    <div class="item a">A</div> 
    <div class="item b">B</div> 
    <div class="item c">C</div> 
</div> 
<div class="next">Next</div> 
<div class="prev">Prev</div> 

CSS

.carousel { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    transform-style: preserve-3d; 
    transition: transform 1s; 
} 

.item { 
    display: block; 
    position: absolute; 
    background: #000; 
    width: 250px; 
    height: 200px; 
    line-height: 200px; 
    font-size: 5em; 
    text-align: center; 
    color: #FFF; 
    opacity: 0.95; 
    border-radius: 10px; 
} 

.a { 
    transform: rotateY(0deg) translateZ(250px); 
    background: #ed1c24; 
} 
.b { 
    transform: rotateY(120deg) translateZ(250px); 
    background: #0072bc; 
} 
.c { 
    transform: rotateY(240deg) translateZ(250px); 
    background: #39b54a; 
} 
.next, .prev { 
    color: #444; 
    position: absolute; 
    top: 100px; 
    padding: 1em 2em; 
    cursor: pointer; 
    background: #CCC; 
    border-radius: 5px; 
    border-top: 1px solid #FFF; 
    box-shadow: 0 5px 0 #999; 
    transition: box-shadow 0.1s, top 0.1s; 
} 

Answer 1

現在の能動素子の位置を覚えているカウンタを追加する必要があります。 有効なステートメントではないため、$(this('.item')).addClass('active');は使用できません。

それが動作しますので、私はあなたのJavaScriptコードを固定：

var carousel = $(".carousel"), 
    currdeg = 0, 
    itemsArray = carousel.find('.item'), 
    currActive = 0; 

$(".next").on("click", {d: "n"}, rotate); 
$(".prev").on("click", {d: "p"}, rotate); 

function rotate(e) { 
    var $active = $(carousel.find('.active')); 

    $active.removeClass('active'); 
    if (e.data.d == "n") { 
     currdeg = currdeg - 120; 
     currActive = (currActive + 1) % itemsArray.length; 
    } 
    if (e.data.d == "p") { 
     currdeg = currdeg + 120; 
     currActive = (currActive - 1 + itemsArray.length) % itemsArray.length; 

    } 
    $(itemsArray[currActive]).addClass('active'); // add the class to the active element 
    carousel.css({ 
     "-webkit-transform": "rotateY(" + currdeg + "deg)", 
     "-moz-transform": "rotateY(" + currdeg + "deg)", 
     "-o-transform": "rotateY(" + currdeg + "deg)", 
     "transform": "rotateY(" + currdeg + "deg)" 
    }); 
} 

をあなたが、私はそれがどのように動作するかを理解カントexample here

Answer 2

EDIT

それは、カウントをスキップして、インクリメント前に限界がありました。インクリメント後に制限を設定することで修正しました。現在の割り当てを追跡するために.activeにスタイルを追加しました。現在の.itemに赤い枠線の破線がある場合、正しく機能しています。コースのスタイルはテストのためのものなので、削除するのが安全です。

---

.carouselは回転しており、 .itemsは乗車中です。カウンターで .itemを参照してみてください。詳細はスニペットでコメントされています。

SNIPPET

var carousel = $(".carousel"), 
 
    currdeg = 0; 
 
// .item.a is at starting position 1 
 
var counter = 0; 
 
$(".next").on("click", { 
 
    d: "n" 
 
}, rotate); 
 
$(".prev").on("click", { 
 
    d: "p" 
 
}, rotate); 
 

 
function rotate(e) { 
 

 
    console.log(e.data.d); 
 
    if (e.data.d == "n") { 
 
    currdeg = currdeg - 120; 
 
    // Incremental increase forward direction 
 
    counter++; 
 
    } 
 
    if (e.data.d == "p") { 
 
    currdeg = currdeg + 120; 
 
    // Incremental decrease backward direction 
 
    counter--; 
 
    } 
 
    // If you go past A you end up at C 
 
    if (counter < 1) { 
 
    counter = 3 
 
    } 
 
    // If you go past C you end up at A 
 
    if (counter > 3) { 
 
    counter = 1 
 
    } 
 
    console.log(counter); 
 
    carousel.css({ 
 
    "-webkit-transform": "rotateY(" + currdeg + "deg)", 
 
    "-moz-transform": "rotateY(" + currdeg + "deg)", 
 
    "-o-transform": "rotateY(" + currdeg + "deg)", 
 
    "transform": "rotateY(" + currdeg + "deg)" 
 
    }); 
 
    // Remove '.active' class on any .item that has it 
 
    $('.item').removeClass('active'); 
 

 
    // Pass counter to a switch function 
 
    switch (counter) { 
 
    // If counter = 1 
 
    case 1: 
 
     // addClass .active to .a 
 
     $('.a').addClass('active'); 
 
     // Stop and leave switch, etc.... 
 
     break; 
 
    case 2: 
 
     $('.b').addClass('active'); 
 
     break; 
 
    case 3: 
 
     $('.c').addClass('active'); 
 
     break; 
 
    default: 
 
     $('.a').addClass('active'); 
 
     break; 
 
    } 
 

 
}

.carousel { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: transform 1s; 
 
} 
 

 
.item { 
 
    display: block; 
 
    position: absolute; 
 
    background: #000; 
 
    width: 250px; 
 
    height: 200px; 
 
    line-height: 200px; 
 
    font-size: 5em; 
 
    text-align: center; 
 
    color: #FFF; 
 
    opacity: 0.95; 
 
    border-radius: 10px; 
 
} 
 

 
.a { 
 
    transform: rotateY(0deg) translateZ(250px); 
 
    background: #ed1c24; 
 
} 
 

 
.b { 
 
    transform: rotateY(120deg) translateZ(250px); 
 
    background: #0072bc; 
 
} 
 

 
.c { 
 
    transform: rotateY(240deg) translateZ(250px); 
 
    background: #39b54a; 
 
} 
 

 
.next, 
 
.prev { 
 
    color: #444; 
 
    position: absolute; 
 
    top: 100px; 
 
    padding: 1em 2em; 
 
    cursor: pointer; 
 
    background: #CCC; 
 
    border-radius: 5px; 
 
    border-top: 1px solid #FFF; 
 
    box-shadow: 0 5px 0 #999; 
 
    transition: box-shadow 0.1s, top 0.1s; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    width: 250px; 
 
    height: 200px; 
 
    position: relative; 
 
    perspective: 1000px; 
 
} 
 

 
.active { 
 
    outline: 5px dashed red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="carousel"> 
 
    <div class="item a active">A</div> 
 
    <div class="item b">B</div> 
 
    <div class="item c">C</div> 
 
    </div> 
 
</div> 
 
<div class="next">Next</div> 
 
<div class="prev">Prev</div>