CMS

ECCUBE2でjQuery bxSlider サムネイル付きを実装

ブロック側にjQueryを記述しても動きません、ページ詳細に<!–{literal}–>タグで記述して下さい。

 

ブロック側

<div class="slider">
 <div><img src="/contents/upload/save_image/画像A"></div>
 <div><img src="/contents/upload/save_image/画像B"></div>
 <div><img src="/contents/upload/save_image/画像C"></div>
 <div><img src="/contents/upload/save_image/画像D"></div>
 <div><img src="/contents/upload/save_image/画像E"></div>
 <div><img src="/contents/upload/save_image/画像F"></div>
</div>

<div class="custom-thumb" >
    <a data-slide-index="0" href="#"><img src="/contents/upload/save_image/画像A" width="127" height="46" /></a>
    <a data-slide-index="1" href="#"><img src="/contents/upload/save_image/画像B" width="127" height="46" /></a>
    <a data-slide-index="2" href="#"><img src="/contents/upload/save_image/画像C" width="127" height="46" /></a>
    <a data-slide-index="3" href="#"><img src="/contents/upload/save_image/画像D" width="137" height="46" /></a>
    <a data-slide-index="4" href="#"><img src="/contents/upload/save_image/画像E" width="127" height="46" /></a>
    <a data-slide-index="5" href="#"><img src="/contents/upload/save_image/画像F" width="127" height="46" /></a>
</div>

 

 

 

ページ詳細 Smarty側

<!--{*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2014 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 *}-->

<!--{strip}-->



●下記を記述 ここから

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" /></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<!--{literal}-->
<script>
    $(document).ready(function(){
      $('.slider').bxSlider({
          auto: true,
          speed: 400,
          pause: 2000,
          pagerCustom: '.custom-thumb',
      });
    });
</script>
<!--{/literal}-->

●ここまで



<!--{/strip}-->

 

Smarty内で<!–{literal}–>タグを使うのがポイント

<!–{literal}–>
<script>

記述

</script>

<!–{/literal}–>

 

Amazonおすすめ

iPad 9世代 2021年最新作

iPad 9世代出たから買い替え。安いぞ!🐱 初めてならiPad。Kindleを外で見るならiPad mini。ほとんどの人には通常のiPadをおすすめします><

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)