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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

470閲覧

slickスライダーがうまく動きません。

iceforest

総合スコア15

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/03/19 12:24

編集2023/03/19 22:08

実現したいこと

slickスライダーを、見本ページのように動かしたい。

前提

slickスライダーを使って、スライダーを作ろうとしています。
jQueryや、slickをダウンロードして、リンクを作っています。

発生している問題・エラーメッセージ

スライダーの形にはなっているのですが、少しスライドすると、動かなくなってしまいます。
画像間のmarginを開ける命令をしているのですが、反映されません。

ご回答よろしくお願いします。

追記
・少しスライドすると動かなくなる問題は、jQueryのasNavFor: '.slider-for',を削除することで動くようになりました。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/style.css"> 8 <link rel="stylesheet" href="css/slick.css"> 9 <link rel="stylesheet" href="css/slick-theme.css"> 10 <title>Document</title> 11</head> 12<body> 13 <header> 14 <div class="head-container"> 15 <div class="logo"><img src="1\logo.svg" alt=""></div> 16 <div class="menu"><span></span><span></span><span></span></div> 17 18 </div> 19 <nav class="menu-in"> 20 <ul class="menu-in1"> 21 <li><a href="#PICKUP">PICK UP</a></li> 22 <li><a href="">FEATURE</a></li> 23 <li><a href="">CONTACT</a></li> 24 </ul> 25 <ul class="menu-in2"> 26 <li><a href="https://twitter.com/">Twitter</a></li> 27 <li><a href="https://www.facebook.com/">facebook</a></li> 28 <li><a href="https://www.instagram.com/">instagram</a></li> 29 30 </ul> 31 </nav> 32 <div id="mask"></div> 33 34 </header> 35 <section> 36 <div class="video"> 37 <video src="1\video (1).mp4"></video> 38 </div> 39 </section> 40 <section> 41 <div class="title"> 42 <h1 id="PICKUP">PICK UP</h1> 43 </div> 44 <div> 45 <ul class="slider"> 46 <li><div class="inner"><img src="1\pickup1.jpg" alt=""></div></li> 47 <li><div class="inner"><img src="1\pickup2.jpg" alt=""></div></li> 48 <li><div class="inner"><img src="1\pickup3.jpg" alt=""></div></li> 49 <li><div class="inner"><img src="1\pickup4.jpg" alt=""></div></li> 50 <li><div class="inner"><img src="1\pickup5.jpg" alt=""></div></li> 51 <li><div class="inner"><img src="1\pickup6.jpg" alt=""></div></li> 52 <li><div class="inner"><img src="1\pickup7.jpg" alt=""></div></li> 53 <li><div class="inner"><img src="1\pickup8.jpg" alt=""></div></li> 54 <li><div class="inner"><img src="1\pickup9.jpg" alt=""></div></li> 55 </ul> 56 </div> 57 </section> 58 59 60 <script 61 src="https://code.jquery.com/jquery-3.6.4.min.js" 62 integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" 63 crossorigin="anonymous"></script> 64 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 65 <script src="js/slick.min.js"></script> 66 <script src="js/main.js"></script> 67</body> 68</html>

CSS

1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7header { 8 width: 100%; 9 padding: 20px 40px; 10 margin: 0 auto; 11 position: relative; 12 position: fixed; 13 z-index: 10; 14} 15 16.head-container { 17 display: flex; 18 justify-content: space-between; 19 align-items: center; 20 21} 22 23.menu { 24 width: 50px; 25 height: 50px; 26 position: relative; 27 z-index: 10; 28 29} 30 31.menu span { 32 position: absolute; 33 border: solid 1px black; 34 width: 50%; 35} 36 37.menu.is-active span { 38 position: absolute; 39 border: solid 1px white; 40 width: 50%; 41} 42 43span:nth-child(1){ 44 transform: rotate(0deg); 45 top: 20px; 46 transition: 0.5s; 47} 48span:nth-child(2){ 49 top: 30px; 50} 51span:nth-child(3){ 52 transform: rotate(0deg); 53 top: 40px; 54 transition: 0.5s; 55} 56 57span.is-active:nth-child(1){ 58 transform: rotate(315deg); 59 top:50%; 60 left: 0; 61 color: white; 62 transition: 0.5s; 63} 64span.is-active:nth-child(2){ 65 opacity: 0; 66} 67span.is-active:nth-child(3){ 68 transform: rotate(-315deg); 69 top:50%; 70 left: 0; 71 color: white; 72 transition: 0.5s; 73} 74 75.menu-in { 76 display: block; 77 position: absolute; 78 top: 0; 79 left: -300px; 80 width: 300px; 81 height: 100vh; 82 z-index: 10; 83 background-color: black; 84 padding: 60px 25px 20px 25px; 85 text-align: left; 86 font-size: 0.9rem; 87 transition: all 0.5s; 88 89} 90 91.menu-in.is-active { 92 position: absolute; 93 top: 0; 94 left: 0; 95 width: 300px; 96 height: 100vh; 97 background-color: rgb(0, 0, 0); 98 z-index: 3; 99 transition: all 0.5s; 100 101} 102 103.menu-in1 { 104 margin: 0 0 60px 0; 105} 106 107.menu-in1 li { 108 padding: 22px 0; 109 border-bottom: solid 1px white; 110} 111 112.menu-in1 li:nth-child(1){ 113 border-top: solid 1px white; 114} 115 116.menu-in1.is-active li { 117 color: white; 118 padding: 30px; 119 margin: 0 auto; 120} 121 122.menu-in li { 123 list-style: none; 124 text-decoration: none; 125} 126 127.menu-in.is-active li a { 128 color: white; 129 list-style: none; 130 text-decoration: none 131} 132 133.menu-in2 li { 134 padding: 5px 0; 135} 136 137 138#mask { 139 display: none; 140 transition: all 0.5s; 141} 142 143#mask.is-active { 144 display: block; 145 position: fixed; 146 top: 0; 147 left: 0; 148 width: 100%; 149 height: 100%; 150 background-color:aqua; 151 opacity: 0.8; 152 153} 154 155video { 156 padding: 80px 0 0 0 ; 157 z-index: 1; 158} 159 160.title { 161 text-align: center; 162 font-size: 24px; 163 padding: 80px 0 40px 0; 164 165} 166 167.slider { 168 width: auto; 169 height: auto; 170 justify-content: space-between; 171 172 173} 174 175.inner { 176 list-style: none; 177 margin: 50px; 178}

jQery

1$('.menu').click(function(){ 2 $('.menu').toggleClass('is-active'); 3 $('.menu span').toggleClass('is-active'); 4 $('.menu-in').toggleClass('is-active'); 5 $('#mask').toggleClass('is-active'); 6}); 7 8$('.menu-in a,#mask').click(function(){ 9 $('.menu').toggleClass('is-active'); 10 $('.menu span').toggleClass('is-active'); 11 $('.menu-in').toggleClass('is-active'); 12 $('#mask').toggleClass('is-active'); 13}); 14 15 16$('.slider').slick({ 17 slidesToShow: 3, 18 slidesToScroll: 1, 19 asNavFor: '.slider-for', 20 21 centerMode: true, 22 focusOnSelect: true 23 }); 24

試したこと

slickスライダーのオプションの勉強。
コードを消したり追加したりして、挙動を調べています。

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

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

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

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

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

guest

回答1

0

自己解決

・少しスライドすると動かなくなる問題は、jQueryのasNavFor: '.slider-for',を削除することで動くようになりました。

・画像間の間隔があかないのは、imgタグに直接paddingをあてることで間隔があきました。

投稿2023/03/19 13:08

iceforest

総合スコア15

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問