カルーセルのアクティブなスライドにクラスを追加する

Question

私は基本的にスライダーの中央のイメージを他のものの2倍の大きさにします。クラスをアクティブにして中央のイメージに渡し、最後のイメージからクラスを削除する必要があります。その結果、中心の画像は常に2倍の大きさになります。私のコードでこれを行うことは可能ですか？

$(document).ready(function(){ 
 

 
    // function active_class(){ 
 
    // $(".active").next().addClass('active'); 
 
    // $(".img_cont").index(1).addClass('jiji'); 
 
    // } 
 
    // active_class(); 
 
    
 
    
 
    var slide_count = $(".carousel li").length; 
 
    var slide_width = $(".carousel li").width(); 
 
    var slide_height = $(".carousel li").height(); 
 
    var total_width = slide_width * slide_count; 
 
    
 
    $(".cont").css({ height: slide_height, width: slide_width, paddingLeft: slide_width , paddingRight: slide_width }); 
 
    $(".carousel").css({ width: total_width, marginLeft: - slide_width}); 
 
    $(".carousel li:last-child").prependTo(".carousel"); 
 
    $("#next").css("right", slide_width); 
 
    $("#prev").css("left", slide_width); 
 
    
 
    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(); 
 
    }); 
 
    
 
    var interval_time = 4000; // 1s 
 
    var mouse_hover_flag = false; 
 
    
 
    $(".cont").hover(function(){ 
 
    mouse_hover_flag = true;    
 
    }, function() { 
 
    mouse_hover_flag = false; 
 
    }); 
 

 
    setInterval(function() { 
 
     if (!mouse_hover_flag) {//if not true 
 
      next_slide(); 
 
     } 
 
    }, interval_time); 
 
    
 
});

*{ 
 
    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; 
 
} 
 

 
.img_cont{ 
 
    transform: scale(0.5); 
 
} 
 

 
.active{ 
 
    transform: scale(1); 
 
}

<div class="cont"> 
 
    <div id="next"> 
 
    </div> 
 
    <div id="prev"> 
 
    </div> 
 
    <ul class="carousel"> 
 
    <li class="img_cont active"> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" /> 
 
    </li> 
 
    <li class="img_cont"> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" /> 
 
    </li> 
 
    <li class="img_cont"> 
 
     <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" /> 
 
    </li> 
 
    <li class="img_cont"> 
 
     <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> 
 

https://codepen.io/Reece_Dev/pen/OgQLjE

Answer 1

それは、すべてのli要素からアクティブなクラスを削除する最初に選択して、もう一度クラスを追加するのは簡単です。例えば

：中央にある画像

function next_slide(){ 
 
    $(".carousel").animate({ 
 
     left: + slide_width 
 
    }, 400, function(){ 
 
     $(".carousel li:last-child").prependTo(".carousel"); 
 
     $('.carousel').css('left', 0); 
 

 
     // Add the following line to prev_slide too: 
 
     $('.carousel li').removeClass('active').eq(0).addClass('active'); 
 
    } 
 
    ); 
 
    }