Q&A
左右での消え方が異なる問題を解決したい
slickを用いてスライダーを作成したのですが、左右で画像の消え方が異なってしまいます。
具体的には
・左スライド → すぐに画像が消える
・→スライド → すこしスライドしたのち消える
という状態です。
現在のコードは以下のようになっています。
現在のコード
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 <title></title> 13 </head> 14<!-- ここからBODY --> 15 <body> 16 <ul class="slider"> 17 <li><a href="#"><img src="img/photo1.jpg" width="30%" height="500" alt=""></a></li> 18 <li><a href="#"><img src="img/photo2.jpg" width="30%" height="500" alt=""></a></li> 19 <li><a href="#"><img src="img/photo3.jpg" width="30%" height="500" alt=""></a></li> 20 <li><a href="#"><img src="img/photo4.jpg" width="30%" height="500" alt=""></a></li> 21 </ul> 22 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 23 <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 24 <script type="text/javascript" src="slick/slick.min.js"></script> 25 <script src="script.js"></script> 26 </body> 27</html>
css
1 ul{ 2 width: 100%; 3 padding: 0; 4 position: absolute; 5 left: 30%; 6} 7 8img{ 9 margin:0; 10} 11
jquery
1 $(function(){ 2 $('.slider').slick(); 3}); 4
wewbで1時間ほど調べたのですが依然改善することができず
お力を貸していただきたいです。
どうかよろしくお願いします。
あなたの回答
tips
プレビュー
