javascript - serialScroll が Prestashop 製品ページで機能しない

Question

Prestashop テーマを開発していますが、serialScroll プラグインが製品ページの画像サムネイルに対して機能しません。

このプラグインは、HTML smarty テンプレートも関連する JavaScript コードも変更していません。

serialScroll の .tpl テンプレート (product.tpl) は次のとおりです。

{if isset($images) && count($images) > 0}
            <!-- thumbnails -->
            <div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
                {if isset($images) && count($images) > 2}
                    <span class="view_scroll_spacer">
                        <a id="view_scroll_left" class="" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
                            {l s='Previous'}
                        </a>
                    </span>
                {/if}
                <div id="thumbs_list">
                    <ul id="thumbs_list_frame">
                    {if isset($images)}
                        {foreach from=$images item=image name=thumbnails}
                            {assign var=imageIds value="`$product->id`-`$image.id_image`"}
                            {if !empty($image.legend)}
                                {assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
                            {else}
                                {assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
                            {/if}
                            <li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
                                <a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}{{/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal}}{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}" data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
                                    <img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}"{if isset($cartSize)} height="{$cartSize.height}" width="{$cartSize.width}"{/if} itemprop="image"/>
                                </a>
                            </li>
                        {/foreach}
                    {/if}
                    </ul>
                </div> <!-- end thumbs_list -->
                {if isset($images) && count($images) > 2}
                    <a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
                        {l s='Next'}
                    </a>
                {/if}
            </div> <!-- end views-block -->
            <!-- end thumbnails -->
        {/if}

product.js:

//init the serialScroll for thumbs
if (!!$.prototype.serialScroll)
    $('#thumbs_list').serialScroll({
        items:'li:visible',
        prev:'#view_scroll_left',
        next:'#view_scroll_right',
        axis:'x',
        offset:0,
        start:0,
        stop:true,
        onBefore:serialScrollFixLock,
        duration:700,
        lazy: true,
        lock: false,
        force:true,
        cycle:false
    });

$('#thumbs_list').trigger('goto', 0);

この部分に使用されたスタイル:

#views_block {
    width: 75%;
    margin: 30px auto auto;
}

.pb-left-column #views_block {
    margin-top: 10px;
}

.show-right-column.hide-left-column span.view_scroll_spacer, .hide-right-column.show-left-column span.view_scroll_spacer {
    width: 27px;
    padding-left: 2px;
}

span.view_scroll_spacer {
    float: left;
    width: 39px;
    padding-left: 12px;
}

.view_scroll_spacer {
    margin-top: 38px;
}

.show-right-column.hide-left-column #thumbs_list, .hide-right-column.show-left-column #thumbs_list {
    width: 294px;
}

#thumbs_list {
    overflow: hidden;
    float: left; 
}

#thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
    height: 90px; 
}

#thumbs_list li {
    float: left;
    height: 90px;
    width: 90px;
    cursor: pointer;
    margin-right: 8px;
    line-height: 0;    
    box-sizing: border-box;
}

li[id^="thumbnail_"] {
    border: none !important;
}

#thumbs_list li a:hover, #thumbs_list li a.shown {
    border-color: #dbdbdb;
}

#thumbs_list li a {
    display: block;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: #fbfbfb; 
}

li[id^="thumbnail_"] a {
    border: none !important;
}

#thumbs_list li img {
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.primary_block .pb-left-column img {
    max-width: 100%;
    height: auto;
}

#view_scroll_left {
    margin-top: 0;
}

#view_scroll_left, #view_scroll_right {
    margin-top: 38px;
    height: 20px;
    width: 20px;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

さらに詳しい情報が必要な場合は、遠慮なくお尋ねください。

前もって感謝します。