JQuary プラグイン　複数枚画像を並べてキャプションつけられるスライダー探してます。

JQuary プラグインで、
複数枚の画像を並べてキャプションつけられるスライダー探してます。

・複数画像(3,4枚)を横に並べスライド
・個別にキャプション(複数行)をつけられる
・キャプションは固定でOK(スライドしなくていい)
・nextボタンは画像の外についている

slick と Captioner Js
の機能を掛け合わせたイメージです。

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

Captioner Js
https://www.francodacosta.com/captionerjs/

ここで聞く内容ではないのかもしれませんが
ご存知の方いましたら是非教えてください

caption追加してみました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
8  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
9  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
10  <link rel="stylesheet" type="text/css" href="./css/styles.css">
11
12  <title>Document</title>
13</head>
14<body>
15<div class="sample2">
16  <div>
17    <img src="images/IMG_5471_s.jpg" width="200px">
18    <div class="caption">
19      <p class="caption-title">キャプションタイトル</p>
20      <p class="caption-description">キャプション本文</p>
21    </div>
22  </div>
23  <div>
24    <img src="images/IMG_5471_s.jpg" width="200px">
25    <div class="caption">
26      <p class="caption-title">キャプションタイトル</p>
27      <p class="caption-description">キャプション本文</p>
28    </div>
29  </div>
30  <div>
31    <img src="images/IMG_5471_s.jpg" width="200px">
32    <div class="caption">
33      <p class="caption-title">キャプションタイトル</p>
34      <p class="caption-description">キャプション本文</p>
35    </div>
36  </div>
37</div>
38<div class="sample2">
39  <div>
40    <img src="images/IMG_5471_s.jpg" width="200px">
41    <div class="caption">
42      <p class="caption-title">キャプションタイトル</p>
43      <p class="caption-description">キャプション本文</p>
44    </div>
45  </div>
46  <div>
47    <img src="images/IMG_5471_s.jpg" width="200px">
48    <div class="caption">
49      <p class="caption-title">キャプションタイトル</p>
50      <p class="caption-description">キャプション本文</p>
51    </div>
52  </div>
53  <div>
54    <img src="images/IMG_5471_s.jpg" width="200px">
55    <div class="caption">
56      <p class="caption-title">キャプションタイトル</p>
57      <p class="caption-description">キャプション本文</p>
58    </div>
59  </div>
60</div>
61<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
62<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
63
64<script type="text/javascript">
65  $(document).on('ready', function() {
66    $(".sample2").slick({
67      dots: true,
68      infinite: true,
69      slidesToShow: 3,
70      slidesToScroll: 3
71    });
72
73  });
74</script>
75</body>
76</html>

css
1 html, body {
2   margin: 0;
3   padding: 0;
4 }
5
6 * {
7   box-sizing: border-box;
8 }
9
10 .slider {
11     width: 80%;
12     margin: 100px auto;
13 }
14
15 .slick-slide {
16   margin: 0px 20px;
17 }
18
19 .slick-slide img {
20   width: 100%;
21 }
22
23 .slick-prev:before,
24 .slick-next:before {
25     color: red;
26 }
27
28 .caption{
29   margin-top: -20px;
30 }
31  .caption-title,
32  .caption-description{
33    margin: 0;
34    padding: 0;
35    font-size: 12px;
36    color: white;
37    background-color: rgba(0,0,255,0.5);
38    z-index: 100;
39  }

修正したので再度記述させていただきます

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
8  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
9  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
10  <link rel="stylesheet" type="text/css" href="./css/styles_2.css">
11  <title>Document</title>
12</head>
13<body>
14<div class="slider-container">
15  <div class="slider">
16<div><a href="#"><img src="images/IMG_0686_s.jpg" width="200px"></a>
17      <div class="caption">
18      <p class="caption-title">キャプションタイトル</p>
19      <p class="caption-description">キャプション本文</p>
20    </div>
21</div>
22<div><a href="#"><img src="images/IMG_5060_s.jpg" width="200px"></a>
23      <div class="caption">
24      <p class="caption-title">キャプションタイトル</p>
25      <p class="caption-description">キャプション本文</p>
26    </div>
27</div>
28<div><a href="#"><img src="images/IMG_0373_s.jpg" width="200px"></a></div>
29<div><a href="#"><img src="images/IMG_5471_s.jpg" width="200px"></a></div>
30<div><a href="#"><img src="images/IMG_0686_s.jpg" width="200px"></a></div>
31<div><a href="#"><img src="images/IMG_5471_s.jpg" width="200px"></a></div>
32
33</div>
34</div>
35
36<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
37<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
38<script type="text/javascript">
39
40var $slider_container = $('.slider-container'),
41    $slider = $('.slider');
42  $(document).on('ready', function() {
43    $(".slider").slick({
44      dots: false,
45      infinite: true,
46      slidesToShow: 3,
47      slidesToScroll: 1,
48      speed: 200,
49      appendArrows: $slider_container,
50      //   // FontAwesomeのクラスを追加
51      prevArrow: '<div class="slider-arrow slider-prev fa fa-angle-left"></div>',
52      nextArrow: '<div class="slider-arrow slider-next fa fa-angle-right"></div>'
53    });
54  });
55</script>
56
57</body>
58</html>
59

css
1 html, body {
2   margin: 0;
3   padding: 0;
4 }
5
6 * {
7   box-sizing: border-box;
8 }
9.slider-container{
10  width: 90%;
11  margin: 100px auto;
12
13}
14 .slick-slide {
15   margin: 0px 20px;
16 }
17
18 .slick-slide img {
19   width: 100%;
20   z-index: 1;
21
22 }
23 .slick-slide img:hover {
24   opacity: 0.8;
25 }
26
27 .slick-prev:before,
28 .slick-next:before {
29     color: black;
30 }
31  .slider-container {
32  position: relative;
33}
34.slider {
35  display: none;
36  margin: 0 24px;
37  overflow: hidden;
38}
39.slider.slick-initialized {
40  display: block;
41}
42.slider-arrow {
43  position: absolute;
44  top: 50%;
45  height: 36px;
46  margin-top: -18px;
47  color: #000000;
48  line-height: 36px;
49  font-size: 28px;
50  cursor: pointer;
51  z-index: 10;
52}
53.slider-prev {
54  left: 0;
55}
56.slider-next {
57  right: 0;
58}
59.slick-slide {
60  padding: 1.5em 0;
61  color: #000;
62  text-align: center;
63  font-size: 1.1em;
64  outline: 0;
65  background-color: #fff;
66}
67.caption{
68  background: rgba(0, 0, 255, 0.5);
69  margin-top: -30px;
70  z-index: 100;
71}
72.caption-title,
73.caption-description{
74  margin: 0;
75  padding: 0;
76  font-size: 12px;
77  color: #fff;
78}
79.caption:hover{
80  opacity: 0.8;
81}
82

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

回答1件

キャンプションは直に書くのはNGですか？
NGでなければ、slickだけでも十分実装できる内容かと思います。

slickのサンプルでいうところの、<div>にキャプションを入れ込むイメージです。

html
1<div class="your-class">
2  <div>
3    <img src="./images/sample.jpg">
4    <div class="caption">
5      <p class="caption-title">キャプションタイトル</p>
6      <p class="caption-description">キャプション本文</p>
7    </div>
8  </div>
9  <div>
10    <img src="./images/sample.jpg">
11    <div class="caption">
12      <p class="caption-title">キャプションタイトル</p>
13      <p class="caption-description">キャプション本文</p>
14    </div>
15  </div>
16  <div>
17    <img src="./images/sample.jpg">
18    <div class="caption">
19      <p class="caption-title">キャプションタイトル</p>
20      <p class="caption-description">キャプション本文</p>
21    </div>
22  </div>
23</div>
24

キャプションの見た目はCSSで整えるとか。

投稿2017/03/31 05:51

yohe32

総合スコア76

rieley

2017/04/01 07:50

yohe32さん、ありがとうございます。 captionつけてみました。ただ、表示はできたのですが、スライド自体ができなくなってしまいました。どこを変えたらいいのか見当がつかず、、、 //その他の問題点・スライドの下のdotsが dots: true, にしてるが表示されない・キャプションを画像の前面に持ってきたいがどうすればいいか　margin-top: -20px; background-color: rgba(0,0,255,0.5); z-index: 100; にしたがダメでした

yohe32

2017/04/01 14:25

スライド自体の動作については、 3つずつ<div class="sample2">でくくっているのが原因です。一つの<div class="sample2">にすべての<div>を格納して下さい。２つめの「キャプションを画像の前面に持ってきたいがどうすればいいか」については、画像の方にもz-indexを指定してみてはどうでしょうか？

rieley

2017/04/01 15:06

ありがとございます。修正したところ動きました！ただ、「キャプションを画像の前面に持ってきたい」がまだできません。ご指摘の画像の方と、caption両方にz-indexを指定しました。 .slick-slide img { z-index: 1; } .caption{ background: rgba(0, 0, 255, 0.5); margin-top: -30px; z-index: 100; }

yohe32

2017/04/03 14:40

試さずにコメントするためうまくいくかわかりませんが、キャプションの方はabsoluteにしてはどうでしょうか？ .caption{ background: rgba(0, 0, 255, 0.5); z-index: 100; position:absolute; bottom:0; left:0; width: 100%; }

rieley

2017/04/03 18:22

ご教授ありがとうございます！試したとことろできました！！ absoluteでうまくいきました。z-indexは外しても効きました。 width: 100%;にしたところスライダー全体に帯のように横が広がってしまい、今回はwidth: 200px; でimgの幅に合わせることにしました。レスポンシブルは別で試してみます。下記修正版です。 .caption{ background: rgba(0, 0, 255, 0.5); margin-top: -30px; position: absolute; width: 200px; } 細かなとこまで見ていただき助かりました... yohe32さん、本当にありがとうございます！！

rieley

2017/04/03 18:44

色々試しましたが、難ありです。リキッドで使いたいのですが、キャプションをabsoluteにするとwidthの％指定とbottomの位置指定が効かず困りものです。もう少し試して見ます。

yohe32

2017/04/04 03:14

absoluteはposition:relative;が指定されている親要素が基準となるため、今回の場合は、スライドする要素にposition:relative;を指定する必要がありますが、おそらくそうするとレイアウトが崩れると思いますので、 HTML構造を少し変更します。 ---変更前--- <div> <img src="./images/sample.jpg"> <div class="caption"> <p class="caption-title">キャプションタイトル</p> <p class="caption-description">キャプション本文</p> </div> </div> -------------- だとしたら ---変更後--- <div> <div class="slick-slide_inner"> <img src="./images/sample.jpg"> <div class="caption"> <p class="caption-title">キャプションタイトル</p> <p class="caption-description">キャプション本文</p> </div> </div> </div> --------------- そしてCSSは、 ------ .slick_slide_inner { position:relative; } .caption{ background: rgba(0, 0, 255, 0.5); z-index: 100; position:absolute; bottom:0; left:0; width: 100%; } ---------- いかがでしょうか？

rieley

2017/04/05 13:57

ご指摘ありがとうございます。明記いただいたコード試しました。結果としてはbackgroundがスライダー全体に帯のように横が広がってしまいます。width: 100%;が inner には効いていません。勝手に生成されている div.slick-track の方に効いています。 slickの構造でこうなってしまうのかもしれません。。

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