我与光滑轮播一起在rtl方向上显示证明轮播，如下所示：
HTML：
<div class="testimonial-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="testimonial-image-slider slider-nav text-center">
<div class="sin-testiImage">
<img src="http://placehold.it/50/3F6881/000">
</div>
<div class="sin-testiImage">
<img src="http://placehold.it/50/D09D8C/000">
</div>
<div class="sin-testiImage">
<img src="http://placehold.it/50/FEDD31/000">
</div>
<div class="sin-testiImage">
<img src="http://placehold.it/50/EEBE74/000">
</div>
<div class="sin-testiImage">
<img src="http://placehold.it/50/313130/fff">
</div>
<div class="sin-testiImage">
<img src="http://placehold.it/50/D09D8C/000">
</div>
</div>
</div>
</div>
<div class="testimonial-text-slider slider-for text-center">
<div class="sin-testiText">
<h2>Shabab Ahmed </h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="sin-testiText">
<h2>Soyong Sourav</h2>
<p>Nam nec tellus a odio tincidunt This lorem is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean nisi sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum gravida.</p>
</div>
<div class="sin-testiText">
<h2>Joker Buzz</h2>
<p>Nam nec tellus a odio tincidunt This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean tincidunt sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum Photoshop.</p>
</div>
<div class="sin-testiText">
<h2>M S Nawaz </h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="sin-testiText">
<h2>Chowchilla Madera</h2>
<p>Nam nec tellus a odio tincidunt This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, aliquet lorem quis tellus velit bibendum auctor, nisi elit consequat ipsum</p>
</div>
<div class="sin-testiText">
<h2>Kattie Luis</h2>
<p>Nam nec tellus a odio tincidunt This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem gravida tincidunt quis bibendum auctor, nisi elit consequat ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS：
body {
direction: rtl;
text-align: right;
unicode-bidi: embed !important;
}
.testimonial-area {
background: rgba(0, 0, 0, 0);
overflow: hidden;
padding: 95px 0 82px;
position: relative;
}
.testimonial-area:after {
background: rgba(45, 62, 80, 0.9) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.testimonial-image-slider {
margin-top: 5px;
}
.slick-list {
margin: 0 5px;
}
.sin-testiImage {
display: inline-block;
margin-bottom: 11px;
outline: medium none;
}
.sin-testiImage img {
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block !important;
height: 80px;
margin-bottom: 30px;
margin-top: 36px;
outline: 0 none;
width: 80px;
}
.sin-testiImage.slick-current img {
border: 2px solid #fff;
height: 146px;
margin-top: 0;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 146px;
}
.testimonial-text-slider h2 {
color: #ffffff;
display: block;
font-family: "montserratregular";
font-size: 30px;
font-weight: 600;
line-height: 24px;
}
.testimonial-text-slider {
margin: auto;
padding: 0;
position: relative;
width: 51%;
z-index: 9;
}
.sin-testiText {
outline: none;
}
.sin-testiText p {
margin-top: 22px;
color: #fff;
line-height: 24px;
}
.slick-prev,
.slick-next {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: rgba(0, 0, 0, 0);
cursor: pointer;
display: block;
font-size: 0;
height: 25px;
outline: medium none;
padding: 0;
position: absolute;
top: 34.6%;
width: 16px;
}
.slick-prev {
left: -31px;
}
.slick-next {
right: -31px;
}
.slick-prev:before,
.slick-next:before {
height: 25px;
width: 16px;
left: 0;
top: 0;
position: absolute;
color: #fff;
content: "";
font-family: "Material-Design-Iconic-Font";
font-size: 50px !important;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.slick-next:before {
right: 0;
content: "";
}
.slick-slider {
z-index: 9;
}
.testimonial-area:hover .slick-prev:before,
.testimonial-area:hover .slick-next:before {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
JS：
$(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
draggable: false,
fade: true,
rtl:true,
asNavFor: ".slider-nav"
});
$(".slider-nav").slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: ".slider-for",
dots: false,
arrows: true,
centerMode: true,
focusOnSelect: true,
rtl:true,
centerPadding: "10px",
responsive: [
{
breakpoint: 450,
settings: {
dots: false,
slidesToShow: 3,
centerPadding: "0px"
}
},
{
breakpoint: 420,
settings: {
autoplay: true,
dots: false,
slidesToShow: 1,
centerMode: false
}
}
]
});
否在将rtl:true js和direction:rtl添加到css轮播中后，实际上不起作用。我看到两个问题：
第一：轮播文本未显示！ 第二：点击图片后，选择不在中心显示的图片。
如何解决此问题？
答案 0 :(得分：0)
我已解决：
将dir="rtl"添加到<div class="testimonial-area" dir="rtl">