どうか教えて下さい！
| 質問 > フロント機能 > slickを使用しスライドショーを作成したいのですが、うまくいきません。 |
フロント機能
 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| quespod |
投稿日時: 2020/4/30 16:59
対応状況: −−−
|
常連   登録日: 2020/4/22 居住地: 投稿: 31 |
slickを使用しスライドショーを作成したいのですが、うまくいきません。 [EC-CUBE] 3.0.18
[レンタルサーバ] ConoHa Wing [OS] Linux web0078.sh.tyo1 3.10.0-962.3.2.lve1.5.28.el7.x86_64 #1 SMP Tue Jan 28 04:53:14 EST 2020 x86_64 [PHP] 7.3.13 [データベース] MySQL 5.7.27-log [WEBサーバ] Apache [ブラウザ] crome/safari [導入プラグインの有無] 無 [カスタマイズの有無] 無 slickを使用しスライドショーを作成したいのですが、うまくいきません。 css.jsを作成し、 html/template/default/css html/template/default/js の中にダウンロードし ブロックにこちらのhtmlを記入しています。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="slick-theme.css" type="text/css"> <link rel="stylesheet" href="slick.css" type="text/css"> <link rel="stylesheet" href="sample.css" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="slick.js" type="text/javascript"></script> <script src="sample.js" type="text/javascript"></script> <title>jQuery</title> </head> <body> <div class='container'> <div class='single-item'> <div> <h3>1</h3> </div> <div> <h3>2</h3> </div> <div> <h3>3</h3> </div> <div> <h3>4</h3> </div> <div> <h3>5</h3> </div> <div> <h3>6</h3> </div> </div> </div> </body> </html> 数字が縦に並び表示されるだけで、スライドショーになりません。 どのようにしたら使用できるのか、どなたかお教えいただけないでしょうか？ https://b-risk.jp/blog/2020/01/slick-customize/ と https://techacademy.jp/magazine/9529 こちらのサイトを参考に行いました。 |
| 468 |
投稿日時: 2020/4/30 22:55
対応状況: −−−
|
神   登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: slickを使用しスライドショーを作成したいのですが、うまくいきません。 ブロックの内容に<!DOCTYPE html>から記述されているという事でしょうか？
ブロックはhtml内の一部のパーツになりますので <!DOCTYPE html> から記述するとHTML構文がおかしくなってしまいます。 /src/Eccube/Resource/template/default/index.twigに デフォルトトップページのスライドショーの記述がありますので そちらを参考にされたほうが良いかと思います。 {% block main %} ～ {% endblock %} のみ部分がスライドショーのHTMLになります。 あと、jQueryやslick関連のファイルはデフォルトで読み込んでいると思いますので linkやscriptタグで再度読み込む必要はないと思います。 （どうしても利用したいバージョン等があるのであれば別ですが jQueryを利用している箇所は他にもありますので差し替えると他に影響があるかもしれません。） sample.jsのみ読み込めば良いかと思います。
|
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |
