bxSliderでスライドごとに異なるcssを適用させる方法

http://8ya.jp/　←このホームページの一番上のスライダーと似た挙動をしたものをbxSliderで作成しようとしています。

参考にしているサイトでは、1枚目のスライドはズームイン、2枚目は横スクロール、3枚目は縦スクロールと各スライドに切り替わった後、別の挙動をさせているのですが、このようにスライド毎に別々に動きを指定するにはどのようにしたらよいのでしょうか？(下記のように、cssのnthof-typeで3つのイメージファイルをそれぞれセレクトしようとしましたが、うまく行きませんでした。) 初心者ですが、お教えいただけると助かります。

HTML
1<!DOCTYPE html>
2
3<html>
4
5<head>
6    <link rel="stylesheet" href="css/jquery.bxslider.css">
7    <link href="css/main.css" rel="stylesheet" type="text/css">
8    <title>Sample1 | サンプルサイト</title>
9    <meta charset="TUTF-8">
10    <script  src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
11    <script src="js/jquery.bxslider.js"></script>
12    <script type="text/javascript" src="js/test.js"></script>
13 
14</head>
15
16<body>
17    <div class="bxslider">
18        <div><img src="images/picture1.jpg"></div>
19        <div><img src="images/picture2.jpg"></div>
20        <div><img src="images/picture3.jpg"></div>
21    </div>
22</body>
23</html>

JavaScript
1.bx-wrapper {
2    margin: 0 !important;
3    -moz-box-shadow: none !important;
4    -webkit-box-shadow: none !important;
5    box-shadow: none !important;
6    border: none !important;
7    background: none !important;
8  }
9
10  .bxslider img:nth-of-type(1){
11    width: 100% !important;
12    height: 865px !important;
13    object-fit: cover;    
14  }
15
16  .bxslider img:nth-of-type(2){
17    width: 100% !important;
18    height: 865px !important;
19    object-fit: cover;     
20  }
21
22  .bxslider img:nth-of-type(3){
23    width: 100% !important;
24    height: 865px !important;
25    object-fit: cover;     
26  }

css
1.bx-wrapper {
2    margin: 0 !important;
3    -moz-box-shadow: none !important;
4    -webkit-box-shadow: none !important;
5    box-shadow: none !important;
6    border: none !important;
7    background: none !important;
8  }
9
10  .bxslider img:nth-of-type(1){
11    width: 100% !important;
12    height: 865px !important;
13    object-fit: cover;    
14  }
15
16  .bxslider img:nth-of-type(2){
17    width: 100% !important;
18    height: 865px !important;
19    object-fit: cover;     
20  }
21
22  .bxslider img:nth-of-type(3){
23    width: 100% !important;
24    height: 865px !important;
25    object-fit: cover;     
26  }

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

回答1件

ベストアンサー

:nth-of-type()は兄弟要素から指定したものを探すセレクタなので、つけるとすれば下記のようになります。

CSS
1.bxslider div:nth-of-type(3) img {}

bxsliderがHTMLの構造を変える可能性もあるので、HTMLの時点で個別にクラスを付けるほうが良いとは思います。

HTML
1    <div class="bxslider">
2        <div class="a"><img src="images/picture1.jpg"></div>
3        <div class="b"><img src="images/picture2.jpg"></div>
4        <div class="c"><img src="images/picture3.jpg"></div>
5    </div>

【:nth-of-type() | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type

投稿2018/12/30 14:41