光滑的轮播在 rtl 方向上不起作用

Question

我使用 slick carousel 在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 轮播后实际运行无效。 我看到两个问题：

第一：轮播文字不显示！！ 第二：点击图像后，select 图像不显示在中心。

如何解决这个问题？

在这里演示

Answer 1

我修复它：

将dir="rtl"添加到<div class="testimonial-area" dir="rtl">