スライドに斜めに文字を入れて動かしたいです

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
スライドショーで文字を斜めにしながら画像と一緒にスライドさせたいのですが、色々試したのですがうまく行きません。
もう一つスライドが今の向きではなく逆向きに動かす方法があれば教えてほしいです。

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="shortcut icon" href="favicon.ico" type="icon/logo.jpg">
	<link rel="apple-touch-icon" href="icon/logo.jpg">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="slick/slick.min.js"></script>
	<title>農業サポートセンター</title>
</head>

<div class="slide">
	<ul id="slider">
    <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>
<script type="text/javascript">
		$('#slider').slick({
	    	autoplay: true,      // 自動で切り替える
	    	autoplaySpeed: 2000, // 待機する時間
	    	arrows: false,       // 次へ・戻るボタンを非表示
	    	dots: false,           // 点のペジャーナビゲーション
	    	transitionDuration: 5000
		});
	</script>
</body>
</html?

#slider {
	width: 100%;
	height: 927px;
    margin: 30px auto;
    position: absolute;
    z-index: 1;
}
#slider img {
    width: 100%;
    height: 927px;
    position: relative;
}
#slider p {
	color: #fff;
	font-size: 10.5rem;
	transform: rotate(-3deg);
	position: absolute; 
	top: 10%;
	left: 10%;
}
.contents {
  position: relative;
  overflow: hidden;
  margin: 10% 0;
  padding: 80px 0;
}

.slanting:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 26%;
  margin: 43% -10% 0;
  background: #fff;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: 100;
}

Lhankor_Mhy

2017/08/04 00:21

これだけではスライドしないのでは？ jsで動かしていると思いますので、そちらのコードもご提示ください。あと、コードはMarkdownで書いてください。https://teratail.com/help

行動規範の内容に同意します

回答1件

ベストアンサー

逆向きに動かす方法

slidesToScrollオプションを-1に。

文字を斜めにしながら画像と一緒にスライドさせたい

サンプル

CSS
1ul,li{
2  margin 0;
3  padding:0;
4}
5#slider {
6    width: 400px;
7    height: 150px;
8}
9#slider img {
10    width: 400px;
11    height: 150px;
12}
13#slider li {
14    position: relative; 
15}
16#slider p {
17    color: #fff;
18    font-size: 1rem;
19    transform: rotate(-3deg);
20    position: absolute; 
21    top: 10%;
22    left: 10%;
23}