HTML、CSS
【HTML・CSS・js/無限ループスライダー】 やりたいこと ・画像（アイコンのような小さめの画像複数）が右から左へ無限ループする ・下部にドットをつける ・通常スライドショーのように矢印も付ける ・あわよくば二段にしたい イメージは添付画像のような形ですが、サイト上に協力会社のロゴが流れるイメージが近いです。 二段にした場合上段と同じ動き（流れる向き・速度）なので矢印とドットもそれに連動している想定です。 流れる動きと矢印・ドットの設置はできたのですが矢印やドットをクリックしても連動していません。また、二段にすることも現在出来ていません。 下記に記載コードを転載しますのでどうしたら希望の動きをするコードになるか見ていただけますと助かります。 HTML <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="slider4.css" /> <link rel="stylesheet" href="slick.css" /> <link rel="stylesheet" href="slick-theme.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="slick.min.js"></script> </head> <body> <ul class="slider-8" id="js-slider-8"> <li> <a href="https://kenwheeler.github.io/slick/" target="_blank" ><img src="img/css_icon_0000_php_icon.png" alt="" /></a> </li> <li><img src="img/css_icon_0001_photoshop.png" alt="" /></li> <li><img src="img/css_icon_0003_Illustrator.png" alt="" /></li> <li><img src="img/css_icon_0010_slack_logo_thin_icon.png" alt="" /></li> <li><img src="img/css_icon_0006_dreamweaver.png" alt="" /></li> <li><img src="img/css_icon_0009_vscode.png" alt="" /></li> <li><img src="img/css_icon_0002_jquery.png" alt="" /></li> </ul> <script> $(function () { $("#js-slider-8").slick({ arrows: true, // 前・次のボタン dots: true, // ドットナビゲーション autoplay: true, autoplaySpeed: 0, speed: 8000, // スライドさせるスピード（ミリ秒） cssEase: "linear", slidesToShow: 5, // 表示させるスライド数 variableWidth: true, // スライド幅の自動計算を無効化 pauseOnFocus: false, pauseOnHover: true, pauseOnDotsHover: true, swipe: true, swipeToSlide: true, touchMove: true, }); }); </script> </body>
