How use Slick Carousel as theme library and how should configure that?

[Mojtaba-Reyhani]

I'm trying to create a front page slide show by using "Slick Carousel" slider

My theme based on "Zurb foundation 6" theme frame work and my site is RTL (Right To Left)language.
to achieve this I initialize my slider like below code:

<script type="text/javascript">
  $(document).ready(function(){
    $('.my-slider').slick({
      dots: true,
      infinite: true,
      speed: 300,
      fade: true,
      slidesToShow: 1,
      adaptiveHeight: true,
      autoplay: true,
      autoplaySpeed: 500,
    });
  });
</script>

Ultimately, the output is something like below image, that you can see yourself in here:

I would be very happy to hear what the problem is, share your experiences and guide me to know what is the right way to use Slick Carousel manually?
Thanks for any solution.

[bndby]

$('.single-item-rtl').slick({
  rtl: true
});