jquery - 如何将活动图像中心保持在光滑滑块中?
问题描述
我有一个带有图像和一些文字的光滑滑块。图像已定位,第一个图像居中,但下一个图像正在缓慢地向左侧移动。如何使每个活动图像居中对齐?顺便说一下,滑块中必须只显示两个图像和一个文本活动图像。这是链接:- 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>
解决方案
中心模式适用于奇数。与奇数的 slideToShow 计数一起使用。
推荐阅读
- android - AdMob MobileAds.initialize() 赞成和反对
- java - 我正在创建一个 android 项目,它将保存用户的用户名和密码,在设备上运行应用程序时出现错误
- java - URL 请求没有返回数据 - Java
- php - 如何在 single.php 中自定义 Wordpress 帖子导航链接默认模板?
- android - 何时在 Android AccessibilityService 中使用 event.getSource() 和 getRootInActiveWindow()
- objective-c - 在视图控制器之间传递字符串
- angular - 为什么我必须手动映射 SystemJS 配置文件中的所有 d3.js 依赖项?
- android - 如何获取所有前台应用程序?
- javascript - 在主 div 之后插入一个空 div
- python - 如何在 python selenium firefox webdriver 中设置标题