# 実装したいこと
slickを使って作成したスライドショーの中の見時をふわっと表示させたい
# 現在の状況・問題点
スライダーは作成できていて文字を配置しており、文字をデフォルトで非表示にしたいのでopacity:0;を指定
しかしjqueryでtabindexを取得できていないのかスライドが変わったときに文字が表示されない状態です。
試したこと
下記のサイト様を参考にtabindexなどを取得しようとコードを書き下記のコードになりましたが
以前文字が表示されませんでした
参考サイト
(スライドのタイミングで文字が浮かび上がる を参考にいたしました)
コード
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 <!-- リセットcss --> 7 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 8 <link rel="stylesheet" type="text/css" href="style.min.css"> 9 <!-- スライダープラグイン --> 10 <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 11 <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 12 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 13 <title></title> 14 </head> 15<!-- ここからBODY --> 16 <body> 17 <div classs="slider-container"> 18 <ul class="slider-box"> 19 <li class="slide-1 "><a href="#"><img src="img/photo1.jpg" alt=""><p class="item item-1">スライド1枚目です</p></a></li> 20 <li class="slide-2 "><a href="#"><img src="img/photo2.jpg" alt=""><p class="item item-2">スライド2枚目です</p></a></li> 21 <li class="slide-3 "><a href="#"><img src="img/photo3.jpg" alt=""><p class="item item-3">スライド3枚目です</p></a></li> 22 <li class="slide-4 "><a href="#"><img src="img/photo4.jpg" alt=""><p class="item item-4">スライド4枚目です</p></a></li> 23 </ul> 24 </div> 25 26 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 27 <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 28 <script type="text/javascript" src="slick/slick.min.js"></script> 29 <script src="script.js"></script> 30 </body> 31</html> 32
scss
1.slider-box{ 2 text-align: center; 3 4// 中央以外のスライドに対する処理 5 .slick-slide:not(.slick-center) { 6 -webkit-filter: brightness(60%); 7 -moz-filter: brightness(60%); 8 -o-filter: brightness(60%); 9 -ms-filter: brightness(60%); 10 filter: brightness(50%); 11 transition: 0.2s linear; 12 p{ 13 display: none; 14 } 15 } 16 17// スライドの文字共通css 18 li{ 19 a{ 20 text-decoration: none; 21 p{ 22 font-size: 1.5vw; 23 opacity: 0; 24 // jqueryでopacity調整してふわっと表示するから0 25 transition: all 3s ; 26 } 27 } 28 } 29 30// スライド個別css 31 .slide-1{ 32 position: relative; 33 34 a{ 35 p{ 36 color: blue; 37 38 position: absolute; 39 top: 50%; 40 left: 50%; 41 transform:translateX(-50%); 42 } 43 } 44 } 45 46 .slide-2{ 47 position: relative; 48 49 a{ 50 p{ 51 color: red; 52 53 position: absolute; 54 top: 50%; 55 left: 50%; 56 transform:translateX(-50%); 57 } 58 } 59 } 60 61 .slide-3{ 62 position: relative; 63 64 a{ 65 p{ 66 color: white; 67 68 position: absolute; 69 top: 50%; 70 left: 50%; 71 transform:translateX(-50%); 72 } 73 } 74 } 75 76 .slide-4{ 77 position: relative; 78 79 a{ 80 p{ 81 color: orange; 82 83 position: absolute; 84 top: 50%; 85 left: 50%; 86 transform:translate(-50%,-50%); 87 } 88 } 89 } 90 91 92 img{ 93 width: 85%; 94 margin: 0 auto; 95 border-radius: 10px; 96 } 97 98 .slick-dots{ 99 bottom: -5%; 100 } 101 102 button{ 103 z-index: 1000; 104 } 105 106} 107
jquery
1$(function(){ 2 $('.slider-box').slick({ 3 autoplay: true, 4 autoplaySpeed: 3000, 5 centerMode: true, 6 centerPadding: '0.5%', 7 pauseOnHover: false, 8 slidesToShow: 3, 9 dots: true, 10 }); 11 12 var $slider = $('.slider-box'); 13 $slider.on('afterChange', function(slick, currentSlide){ 14 var $text = $('.item'); 15 $text.css('opacity','0'); 16 var $realindex = $(this).attr("tabindex") ; 17 $('.item-' + $realindex).css('opacity','1'); 18 }); 19 20}); 21
何卒アドバイスいただけると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/11 21:24