slickのレスポンシブで自動再生以外の切り替えが出来ない

Question

実現したいこと

スマホでslickのスワイプが出来る様にしたいです

発生している問題・分からないこと

slickスライダーをスマホ表示にすると、スライドが効かなくなります。

responsiveで設定したarrowやdotsのture or falseは効いており、
またautoplayをtureにすると問題なく動くのですが、
autoplayをfalseにすると、arrowやdotsのクリックもスワイプも効かなくなってしまいます。

該当のソースコード

        $(document).ready(function () {
            $('.concept-slider').slick({
                dots: true,
                infinite: false,
                speed: 500,
                cssEase: 'linear',
                autoplay: false,
                adaptiveHeight: false,
                prevArrow: '<img src="./images/common/arrow.png" class="slide-arrow prev-arrow">',
                nextArrow: '<img src="./images/common/arrow.png" class="slide-arrow next-arrow">',
                dotsClass: "slide-dots",
                responsive: [{ // レスポンシブ対応に関する記述
                    breakpoint: 768, // ブレイクポイント 768px
                    settings: { // その場合のオプション設定
                        arrows: false,
                    }
                }]
            });
        });

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

検索で調べたレスポンシブが効かない際の対処法などは、試しましたが結果を得られませんでした。
また、swipe:ture,を記述してみる等試しましたが、解消できませんでした。

また、autoplayのみで動く現象は、類似の質問を見つけることができませんでした。

補足

pcは全て問題なく動作しています

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、「arrowやdotsのクリックもスワイプも効かなく」という現象は確認できませんでした。

[Lhankor_Mhy]

もしかして、特定のモバイルデバイス（たとえば、iPhoneだけとか）でのみ問題が発生するのであれば、そのように書かれた方が回答が付きやすいかもしれません。

[neco]

ご回答、ご丁寧なアドバイスもありがとうございます！
初めての質問だったので参考になります。

取り急ぎiOSのデバイスPC2台、iPhone2台（それぞれOSver別）では全て同じ事象が起きていることを確認しています。
iOS以外は現時点で未確認ですが、掲載した記述以外のところに問題があるのかもしれませんね。
もう一度全体を見直してみます。

Answer 1

スワイプできない原因は、スマホのナビゲーションメニューが被ってしまっていたためと分かりました！

スマホのナビをクリックで全画面表示にするため、
opacity: 0;　→　アクティブの時にopacity: 1; 　と設定にしていましたが、
opacity: 0; のナビが常に上に被っているような状態となり、
スワイプやアローを押してもスライダーに触れていない状態でした。

ナビをdisplay: none;　→ display: block;　で切り替えるようにしたところ、
無事に問題解決しました。

同様のミスをする方がいらっしゃるか分かりませんが…
参考までに残しておきます。