やりたいこと
上記のようの画像スライドコンテンツを横並びにしたいのですが、フレックスボックスを用いて、横並びにすると、なぜか要素が消えてしまいます。
該当のソースコード
html:index.html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="js/index.js"></script> 6 <link rel="stylesheet" href="css/style.css"> 7 <!-- slick --> 8 <link href="slick/slick-theme.css" rel="stylesheet" type="text/css"> 9 <link href="slick/slick.css" rel="stylesheet" type="text/css"> 10 <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> 11 <script type="text/javascript" src="slick/slick.min.js"></script> 12 </head> 13 <body> 14 <div class="container"> 15 <div class="item"> 16 <ul class="slider"> 17 <li><a href="#"><img src="images/1.png" alt="image01"></a></li> 18 <li><a href="#"><img src="images/2.png" alt="image02"></a></li> 19 <li><a href="#"><img src="images/3.png" alt="image03"></a></li> 20 </ul> 21 </div> 22 23 <div class="item"> 24 <ul class="slider"> 25 <li><a href="#"><img src="images/4.jpg" alt="image04"></a></li> 26 <li><a href="#"><img src="images/5.png" alt="image05"></a></li> 27 <li><a href="#"><img src="images/6.png" alt="image06"></a></li> 28 </ul> 29 </div> 30 </div> 31 </body> 32</html> 33
css:style.css
1ul { 2 list-style: none; 3} 4 5.container { 6 display: flex; 7} 8
javascript:index.js
1$(function(){ 2 3$('.slider').slick({ 4 autoplay:true, 5 autoplaySpeed:5000, 6 dots:true, 7}); 8}) 9
試したこと
floatで試してみたのですが、同様に要素が消えてしまいます...
何が原因なのでしょうか?