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

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

ただいまの
回答率

90.51%

  • jQuery

    8169questions

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

  • CSS

    7565questions

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

slick.jsについて(id名が消える)

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 65

Mokn1356

score 4

バージョン:1.6.0
公式サイト:https://kenwheeler.github.io/slick/

  $(document).ready(function(){
  $('.your-class2').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    arrows: true,
    dots: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    initialSlide: 0,
    infinite: true
  });
});
<ul class="your-class2 colum4 pc">
    <li><div class="colum4_col" id="point01">
            <p class="point"><img src="images/point01.png" alt=""></p>
            <p class="title">タイトル</p>
            <p class="text">
              文章
            </p>

            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
        </div></li>

    <li><div class="colum4_col" id="point02">
            <p class="point"><img src="images/point01.png" alt=""></p>
            <p class="title">タイトル</p>
            <p class="text">
              文章
            </p>

            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
        </div></li>

    <li><div class="colum4_col" id="point03">
                <p class="point"><img src="images/point01.png" alt=""></p>
            <p class="title">タイトル</p>
            <p class="text">
              文章
            </p>

            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
        </div></li>

    <li><div class="colum4_col last" id="point04">
                <p class="point"><img src="images/point01.png" alt=""></p>
            <p class="title">タイトル</p>
            <p class="text">
              文章
            </p>

            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
        </div></li>

    <li><div class="colum4_col last" id="point04">
                <p class="point"><img src="images/point01.png" alt=""></p>
            <p class="title">タイトル</p>
            <p class="text">
              文章
            </p>

            <p class="detail_btn"><a href="">詳しくはこちら</a></p>
        </div></li>
</ul><!-- .your_class_end -->

現在上記コードでスライダーを動かしているのですが、clone生成した際に 
liの中の<div class="colum4_col" id="point01"></div>
のid名だけが下記の様に消えてしまいます。(Firefox要素を)

<li class="slick-slide slick-cloned slick-active" data-slick-index="5" aria-hidden="false" style="width: 276.667px;" tabindex="-1">
<div class="colum4_col" id="ここのidが消える">
            <p class="point"><img src="images/point01.png" alt=""></p>
            <p class="title">タイトル</p>
            <p class="text">文章
            </p>

            <p class="detail_btn"><a href="/reason/#01" tabindex="0">詳しくはこちら</a></p>
        </div></li>

▽Clone部分

<!-- Clone -->

<li class="slick-slide slick-cloned slick-active" data-slick-index="5" aria-hidden="false" style="width: 255.783px;" tabindex="-1">
<div class="colum4_col" id="">
    <p class="point"><img src="images/point01.png" alt=""></p>
    <p class="title">タイトル</p>
    <p class="text">文章</p>
    <p class="detail_btn"><a href="" tabindex="0">詳しくはこちら</a></p>
</div>
</li>

<li class="slick-slide slick-cloned slick-active" data-slick-index="6" aria-hidden="false" style="width: 255.783px;" tabindex="-1">
<div class="colum4_col" id="">
    <p class="point"><img src="images/point02.png" alt=""></p>
    <p class="title">タイトル</p>
    <p class="text">文章</p>
    <p class="detail_btn"><a href="" tabindex="0">詳しくはこちら</a></p>
</div>
</li>

<li class="slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" style="width: 255.783px;" tabindex="-1">
<div class="colum4_col" id="">
    <p class="point"><img src="images/point03.png" alt=""></p>
    <p class="title">タイトル</p>
    <p class="text">文章</p>
    <p class="detail_btn"><a href="" tabindex="0">詳しくはこちら</a></p>
</div>
</li>

<li class="slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" style="width: 255.783px;" tabindex="-1">
<div class="colum4_col last" id="">
    <p class="point"><img src="images/point04.png" alt=""></p>
    <p class="title">タイトル</p>
    <p class="text">文章</p>
    <p class="detail_btn"><a href="" tabindex="0">詳しくはこちら</a></p>
</div>
</li>

<!-- Clone -->


上記クローン後からは通常通りid名がpoint01~04と追記されます。

原因が分からず質問させてもらいました。

よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/05/16 18:15

    プラグインのコード見てないので想像でしかないため回答前に確認ですが、id消えることによって何か問題が発生しますか?

    キャンセル

  • Mokn1356

    2019/05/17 08:27

    id名point01~04で背景色などのスタイルを切り替えているので、
    id名が消えると設定しているCSSが効かなくなってしまうという問題が発生しております。

    キャンセル

  • mts10806

    2019/05/17 08:31

    その内容次第では代替案でいけなくもないと思います。ちょっと詳しく確認してみます

    キャンセル

回答 2

checkベストアンサー

+2

元ソースを確認すると
https://cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick.js
※CDNです

Infiniteのセットアップメソッドで確かにidを空にする処理が書かれています。

    Slick.prototype.setupInfinite = function() {

        var _ = this,
            i, slideIndex, infiniteCount;

        if (_.options.fade === true) {
            _.options.centerMode = false;
        }

        if (_.options.infinite === true && _.options.fade === false) {

            slideIndex = null;

            if (_.slideCount > _.options.slidesToShow) {

                if (_.options.centerMode === true) {
                    infiniteCount = _.options.slidesToShow + 1;
                } else {
                    infiniteCount = _.options.slidesToShow;
                }

                for (i = _.slideCount; i > (_.slideCount -
                        infiniteCount); i -= 1) {
                    slideIndex = i - 1;
                    $(_.$slides[slideIndex]).clone(true).attr('id', '') //ここ
                        .attr('data-slick-index', slideIndex - _.slideCount)
                        .prependTo(_.$slideTrack).addClass('slick-cloned');
                }
                for (i = 0; i < infiniteCount; i += 1) {
                    slideIndex = i;
                    $(_.$slides[slideIndex]).clone(true).attr('id', '') //ここ
                        .attr('data-slick-index', slideIndex + _.slideCount)
                        .appendTo(_.$slideTrack).addClass('slick-cloned');
                }
                _.$slideTrack.find('.slick-cloned').find('[id]').each(function() {
                    $(this).attr('id', ''); //ここ
                });

            }

        }

    };

これは仕方ない部分もあるかもしれません。
clone作るとidもコピーされますが、そもそもHTMLのルールとして「同一IDは画面内に存在してはいけない」というのがあるので、それを防ぐための対策だと思います。

id名point01~04で背景色などのスタイルを切り替えている

ここは前提・仕様・要件にもなるので質問に追記しておいてもらいたいところではありますが、

スライドさせる要素が増減することを加味しても「別のIDを振るように(例えば元のID+"_clone")修正した元コードを自身のサーバーに配置する」というのはあまり現実的ではないので、id指定しているところをclassに変更するなどの対応が望ましいかと思われます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/17 09:19

    なるほどです。 一度classに変更して確認してみます。
    ありがとうございます。

    キャンセル

  • 2019/05/17 10:36

    classに変更しましたら無事希望通りの動きにできました。
    長々とご指摘・ご説明ありがとうございました。

    また、機会がありましたらよろしくお願いいたします。

    キャンセル

  • 2019/05/17 10:47 編集

    classは「複数設定できる」だけであって「1個しか使わない場合につけてはいけない」ルールはないので、classのほうが有益な場面が多いです。idのように制約が多い属性は使いどころを見極める必要があります。
    ただもちろん全てclassにすればいいというわけではなくて、役割分担の観点からすると「役割が完全に決まっているもの、固定化されたもの」はidを使って明確化したほうがコードに意味がでてきます。

    キャンセル

  • 2019/05/17 10:51

    今まであまり意識していませんでしたが、今後はclass、idの使いどころや役割等にも
    意識してつけていきたいと思います。

    いろいろとありがとうございました。

    キャンセル

+2

id名が消えてしまう理由について回答します。
slick の infinite の仕様のようです。
html的に同一idが存在するのはNGですので、このような仕様になっているのだと思います。

コードを見ると、setupInfinite の中で、$(_.$slides[slideIndex]).clone(true).attr('id', '') とclone字にid要素に空をセットしています。

slick.js
↑Slick.prototype.setupInfinite で検索してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/17 09:20

    なるほど。そういう仕組みだったのですね。
    謎がわかりました。 ありがとうございます。
    class名に変更して一度試してみようと思います。

    キャンセル

同じタグがついた質問を見る

  • jQuery

    8169questions

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

  • CSS

    7565questions

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