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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3877閲覧

Slick 2周目 途切れてしまう

numakichi

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/02/28 01:06

実現したいこと

slick.jsを使い、無限に流れるスライダーを作成したい

前提

slick.jsを使い、無限に流れ続けるスライダーを作成していました。
autoplayやinfiniteをtrueにしても、1周目で途切れてしまいます。
以下、codepenにコードを載せています。
https://codepen.io/masakichi09/pen/bGxgGYZ

行き詰ってしまっているので、ヒントになるようなお力添えいただければ幸いです。

該当のソースコード

html

1<section class="sec-plan"> 2 <div class="slider fadeIn"> 3 <div><img src="https://drive.google.com/uc?export=view&id=1j6jK7rPPiQN-H015F5G6QFL1-N_kuuWv" alt=""></div> 4 <div><img src="https://drive.google.com/uc?export=view&id=148JvgjT_DOIc87JFcMj39pg0-wYU18tQ" alt=""></div> 5 <div><img src="https://drive.google.com/uc?export=view&id=11YbLo8AzxYFFnQ6gGORJoQI-My8ZSU-V" alt=""></div> 6 <div><img src="https://drive.google.com/uc?export=view&id=1GXdguLu6Uy9z6MrPotzYcGayWnw6-qxx" alt=""></div> 7 <div><img src="https://drive.google.com/uc?export=view&id=1mQDqpLRjuhUBB-ip-bwz-s5kMxlc_Ekd" alt=""></div> 8 <div><img src="https://drive.google.com/uc?export=view&id=1GCymB6fPsV8JRa5QEFIGaSTuI5nTEJUQ" alt=""></div> 9 <div><img src="https://drive.google.com/uc?export=view&id=1PCsK683zIU44wcER29or96K0GepBVsd7" alt=""></div> 10 <div><img src="https://drive.google.com/uc?export=view&id=1_DMU7NWDn828rnIN0ExhH5iKid6yBTQN" alt=""></div> 11 <div><img src="https://drive.google.com/uc?export=view&id=1fCcA_cWCUOs_UEVl0muHv3vOCJs05IS3" alt=""></div> 12 <div><img src="https://drive.google.com/uc?export=view&id=1awXvUP4XUrss9OByx8MZ74BWk46zKMkf" alt=""></div> 13 </div><!-- slider --> 14</section><!-- sec-plan -->

css

1.sec-plan{ 2 position: relative; 3} 4.sec-plan .slider{ 5 width: 100vw; 6 margin-left: calc(((100vw - 100%) / 2) * -1); 7 margin-right: calc(((100vw - 100%) / 2) * -1); 8} 9.sec-plan .slider img{ 10 width: 100%; 11 height: 100%; 12 max-width: 298px; 13 max-height: 420px; 14 min-width: 298px; 15 min-height: 420px; 16} 17.sec-plan .slider .slick-slide{ 18 height: auto!important; 19 margin-right: 6px!important; 20 margin-left: 6px!important; 21 max-width: 298px; 22} 23 24@media screen and (max-width: 1024px) { 25 .sec-plan .slider .slick-slide{ 26 max-width: 175px; 27 margin-right: 2px!important; 28 margin-left: 2px!important; 29 } 30 .sec-plan .slider img{ 31 max-width: 175px; 32 max-height: 290px; 33 min-width: 175px; 34 min-height: 290px; 35 } 36 .sec-plan .inner{ 37 padding: 6.8rem 1rem 8rem; 38 } 39} 40

javascript

1$(function () { 2 let slicktype = ""; 3 const breakPoint = 1025; 4 5 function slickPc(){ 6 $('.sec-plan .slider').slick({ 7 infinite: true, 8 autoplay: true, // 自動再生ON 9 arrows: false, // 矢印OFF 10 speed: 8000, // スライド、フェードアニメーションの速度2000ミリ秒 11 autoplaySpeed: 0, // 自動再生速度4000ミリ秒 12 pauseOnFocus: false, 13 pauseOnHover: false, 14 pauseOnDotsHover: false, 15 dots: false, 16 centerMode: true, 17 centerPadding: '150px', 18 waitForAnimate: false, 19 slidesToShow: 3, 20 cssEase: 'linear', 21 useTransform: false, 22 swipe: false, 23 }); 24 } 25 26 function slickSmt(){ 27 $('.sec-plan .slider').slick({ 28 infinite: true, 29 autoplay: true, // 自動再生ON 30 arrows: false, // 矢印OFF 31 speed: 8000, // スライド、フェードアニメーションの速度2000ミリ秒 32 autoplaySpeed: 0, // 自動再生速度4000ミリ秒 33 pauseOnFocus: false, 34 pauseOnHover: false, 35 pauseOnDotsHover: false, 36 dots: false, 37 centerMode: true, 38 waitForAnimate: false, 39 slidesToShow: 2, 40 centerPadding: '0px', 41 cssEase: 'linear', 42 useTransform: false, 43 swipe: false, 44 }); 45 } 46 47 $(function(){ 48 if( window.innerWidth < breakPoint ){ 49 slickSmt(); 50 slicktype = "smt"; 51 }else{ 52 slickPc(); 53 slicktype = "pc"; 54 } 55 $(window).on('resize',function(){ 56 if( window.innerWidth < breakPoint && slicktype == "pc"){ 57 $('.sec-plan .slider').slick('unslick'); 58 slickSmt(); 59 slicktype = "smt"; 60 }else if( window.innerWidth >= breakPoint && slicktype == "smt" ){ 61 $('.sec-plan .slider').slick('unslick'); 62 slickPc(); 63 slicktype = "pc"; 64 } 65 }); 66 }); 67});

試したこと

以下の記事のslick.jsを使いました。
https://sinpe-pgm.com/slick-bugfix/

各端末では以下の通りでした。
WindowsのPC、Mac ⇒ 無限に流れ続けた
ipad ⇒ 2周目が途切れた
iPhone、Android ⇒ 無限に流れ続けた

補足情報(FW/ツールのバージョンなど)

今回質問用にcodepenを使っていますが、
必要なcss、jsはfunctions.phpへ読み込みしています。

// slick-CSS読み込み wp_enqueue_style( 'slick', get_template_directory_uri() . '/slick/css/slick.css', array(), '1.0.0', 'all' ); // slick-theme-CSS読み込み wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/slick/css/slick.css', array(), '1.0.0', 'all' ); // jQuery読み込み wp_enqueue_script( 'jquery-js', get_template_directory_uri() . '/jquery/jquery-3.6.1.min.js', array( 'jquery' ), '3.6.1', true ); // slick.min読み込み wp_enqueue_script( 'slick-min-js', get_template_directory_uri() . '/slick/js/slick.min.js', array( 'jquery' ), '1.0.0', true ); // slick読み込み wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/slick/js/slick.js', array( 'jquery' ), '1.0.0', true );

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2023/02/28 03:40

WordPressだとそうなるのか、静的HTMLで組んでも同じなのかというところも確認してみてください。 iPadも端末やOSバージョンなども記載いただいた方が良いと思います。
doyuma

2023/02/28 03:49

CSSの26行目 「max-width: 175px;」 が原因かもしれません。この行をコメントアウトして試してみてください。
numakichi

2023/02/28 04:08

doyumaさん、コメントいただきありがとうございます! .slick-slideのmax-widthをコメントアウトしたところ、無限に流れ続けることができました! https://codepen.io/masakichi09/pen/bGxgGYZ ただ、画像どうしの余白が広すぎるので、調べて対応してみますね!
numakichi

2023/02/28 04:13

m.ts10806さん、ご注意ありがとうございます! 現在、WordPressで起こっている不具合でした。 さらに、iPadについては、私管理ではないiPadで起きている不具合でMacのレスポンシブモード(iPad Pro 12.9インチ Safari OS:16.0)のものです。 静的HTMLでの確認をこれからいたします!
guest

回答1

0

自己解決

引用テキスト

doyuma
2023/02/28 12:49

CSSの26行目 「max-width: 175px;」 が原因かもしれません。この行をコメントアウトして試してみてください。

⇧上記で解決いたしました!
doyumaさん、ありがとうございました!
https://codepen.io/masakichi09/pen/bGxgGYZ

投稿2023/04/06 10:01

numakichi

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問