slickを使って文字と画像を一緒に動かしたいです

Question

###前提・実現したいこと
slickを使ったスライドショーで画像と文字も一緒に動かしたいです。
もう一つ現状左方向に向かってスライドしているのですがそれを右方向に向かってスライドするようにしたいです
イメージは下の画像のような感じです

<div class="mainVisual">
		<div class="mainVisual__slide">
			<ul class="mainVisual__slide--item">
			<li><img src="img/slide1.jpg"><p class="img1">文化と確信を融合させた｢農｣の形</p></li>
			<li><img src="img/slide2.jpg"><p class="img2">半世紀先まで続く｢農｣をつくり出す</p></li>
		    <li><img src="img/slide3.jpg"><p class="img3">文化と確信を融合させた｢農｣の形</p></li>
		</ul>
	</div>
</div>

.mainVisual__slide--item img {
    width: 100%;
    height: 100vh;
    position: relative;
}
.mainVisual__slide--item p {
    position: absolute;
    top: 500px;
    left: 1400px;
    font-size: 6rem;
    color: #fff;
}

<script type="text/javascript">
		$(function() {
    $('.mainVisual__slide--item').slick({
          infinite: true,
          slidesToShow: 1,
          centerMode: true, //要素を中央寄せ
          centerPadding:'100px', //両サイドの見えている部分のサイズ
          autoplay:true, //自動再生
          responsive: [{
               breakpoint: 10000,
                    settings: {
                         centerMode: false,
               }
          }]
    	 });
		});
	</script>

Answer 1

position: relative; は親要素に付ける必要があります。また、top: 500px;などでは画面幅が変わったときに対応できません。画像に書いてしまえばよいのでは。

画像に width: 100%; height: 100vh; と指定していますが、これでは画面幅によっては引き伸ばされませんか?

Comments

[ryuji000]

いつも回答ありがとうございます。
常に画面いっぱいに表示したかったのでこのように書いたのですが他に画面いっぱいに表示する方法などあれば教えていただけると助かります

[kei344]

「画面いっぱい」は横幅に対して？縦幅に対して？デバイスは？ブラウザはどこまで対応？とか考える必要があり、それなりに難しいですよ。具体的な要件をつめた上で、ご自身で調べられてから質問されることをお勧めします。

[ryuji000]

すみません知識がなく迷惑をかけてしまい。
また何かありましたらよろしくお願いします

Answer 2

文字も一緒に動かしたい

今のCSSを全部外せばいいのではないでしょうか？

右方向に向かってスライド

rtl: trueにしたうえ、親要素にdir属性をつけなければならないようです。(dir="rtl")

http://kenwheeler.github.io/slick/

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

Comments

[ryuji000]

回答ありがとうございます。
追加で説明に画像を追加したので見ていただければ助かります。
この場合だと親要素は<div class="mainVisual__slide">これになりますか?

[x_x]

mainVisual__slide--itemのほうですね

[ryuji000]

ありがとうございます。
かいけつできました。
またなにかありましたらよろしくおねがいします