how do i keep the active image center in the slick slider?

I have a slick slider with the image and some text. The image is positioned and the the first image is centered but the next images are slowly moving towards the left side.How do i keep every active images centered aligned?By the way there must showing only two images in the slider and one text for the active images.Here is the link:-http://165.22.181.70/test-8/ ,Please look at the client testimonials section.(P.S :- Only three images at a time should be shown in the carousel). Please help.

jQuery('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
jQuery('.slider-nav').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

.testimonials .slider-nav .slick-slide {
  width: 150px !important;
  margin: 8px 2.4em;
}

.slider-nav {
  width: 600px;
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

.testimonials .slider-nav .slider-img {
  border-radius: 50%;
  border: 1px solid transparent;
}

.testimonials .slick-prev,
.testimonials .slick-next {
  display: none !important;
}

.testimonials .slick-dots {
  bottom: -219px !important;
}

.testimonials .slider-nav .slick-current .slider-img {
  border: 3px solid #00c590;
  transform: scale(1.1);
}

.testimonials .slider-for {
  text-align: center;
}

.testimonials .slick-dots li {
  width: 20px;
  border: 1px solid transparent;
  border-radius: 50%;
  height: 20px;
}

.testimonials .slick-dots .slick-active {
  width: 20px;
  border: 1px solid #bf9b30;
  border-radius: 50%;
  height: 20px;
}

.testimonials .slide-text p {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
}

.testimonials .slick-dots li button {
  width: 10px;
  background: #d5d5d5 !important;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
}

.testimonials .slick-dots .slick-active button {
  width: 10px;
  background: #bf9b30 !important;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

<section class="testimonials" id="testimonials"><div class="inner-contianer"><div class="slider-nav"><div class="slide-image"><img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img"></div><div class="slide-image"><img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img"></div><div class="slide-image"><img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img"></div><div class="slide-image"><img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img"></div><div class="slide-image"><img src="<?php echo get_stylesheet_directory_uri();?>/images/girl2.png" class="slider-img"></div></div><div class="slider-for"><div class="slide-text"><p>“Magellan Consulting Group helped us to realize our potential of production capacity. With the same number of employees, last month we were able to increase production by 14% compared to our previous production record. This performance should
          be our reference moving forward, so we can meet our budget objectives.”</p><h5>Supply Chain Manager</h5></div><div class="slide-text"><p>“This performance should be our reference moving forward, so we can meet our budget objectives”</p><h5>Supply Chain Manager</h5></div><div class="slide-text"><p>“Magellan Consulting Group helped us to realize our potential of production capacity. With the same number of employees, last month we were able to increase production by 14% compared to our previous production record. This performance should
          be our reference moving forward, so we can meet our budget objectives.”</p><h5>Supply Chain Manager</h5></div><div class="slide-text"><p>“With the same number of employees, last month we were able to increase production by 14% compared to our previous production record.”</p><h5>Supply Chain Manager</h5></div><div class="slide-text"><p>“With the same number of employees, last month we were able to increase production by 14% compared to our previous production record.”</p><h5>Supply Chain Manager</h5></div></div></div></section>

Latest Images

Trending Articles

Latest Images