光滑的旋转木马在 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 轮播后，操作无效。我看到两个问题：

first: 轮播文字不显示！！ second: 点击图片后，select 图片没有显示在中间。

如何解决这个问题？

Demo Here

Answer 1

我修好了：

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

光滑的旋转木马在 rtl 方向上不起作用

slick carousel doesn't work in rtl direction

javascript

html

css

twitter-bootstrap

slick.js