CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Reece
Reece

Reputation: 2711

Adding a class to the active slide in carousel

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-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

Upvotes: 0

Views: 2795

Answers (1)

marwils
marwils

Reputation: 473

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

Upvotes: 3

Related Questions