質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

5036閲覧

スライダーで文字をふわっと表示させたい

kyasarin

総合スコア14

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/04/11 13:22

# 実装したいこと
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

何卒アドバイスいただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

参考にされているページがそもそもslickではなくSwiperを使用しているので、それに変えてみてはいかがでしょう。

【Swiper - Most Modern Mobile Touch Slider】
http://idangero.us/swiper/

投稿2019/04/11 15:09

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyasarin

2019/04/11 21:24

回答ありがとうございます! はい!alickで解決しようとしたのですが解決できなかったためswiperを 使おうと思います!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問