我使用光滑的轮播在rtl方向上展示推荐轮播，如下所示：
目录：
<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:truejs 并将direction:rtl添加到 css 轮播后没有操作不起作用。我看到两个问题：
第一：轮播文字不显示！！第二：单击图像后，选择 图像不显示在中心。
如何解决这个问题？
在这里演示
我修复了它：
将dir="rtl"添加到<div class="testimonial-area" dir="rtl">
它对我有用(将样式添加到您光滑的滑块主div(如果不起作用，请添加让调查 = { RTL：对， };