как сохранить активный центр изображения в скользящем слайдере? - PullRequest
Новая
       7

как сохранить активный центр изображения в скользящем слайдере?

0 голосов
/ 03 марта 2020

У меня есть скользкий слайдер с изображением и текстом. Изображение позиционируется, и первое изображение центрируется, но следующие изображения медленно перемещаются влево. Как сохранить выравнивание по центру всех активных изображений? Кстати, на слайдере должно отображаться только два изображения и один текст для активные изображения. Вот ссылка: - http://165.22.181.70/test-8/, пожалуйста, посмотрите раздел отзывов клиентов (PS: - В карусели должно быть показано только три изображения одновременно). Пожалуйста, помогите. 

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>

1 Ответ

0 голосов
/ 03 марта 2020

Режим центра хорошо работает с нечетным числом. Используйте с нечетными слайдамиToShow рассчитывает.

...