将类添加到轮播中的活动幻灯片

Question

I basically want the centre image in the slider to be twice as big as the others. I need to be able to pass the class active to the centre image and remove it from the last image. So that the centre image is always twice as big. Is it possible to do this with my code?

 $(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-qc-1500-700-2.jpg" alt="" /> </li> <li class="img_cont"> <img src="http://lorempixel.com/output/abstract-qc-1500-700-6.jpg" alt="" /> </li> <li class="img_cont"> <img src="http://lorempixel.com/output/abstract-qc-1500-700-1.jpg" alt="" /> </li> <li class="img_cont"> <img src="http://lorempixel.com/output/abstract-qc-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

It's easy to remove active class from all li elements, select the first and add the class again.

For example:

  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'); } ); }