我需要一些帮助将此Coolcarousel example滑块添加到我朋友的Shopify网站中。
我怀疑.js没有被阅读，但我不知道为什么。
Here is the Link to the website密码为： thayro
这是我在theme.liquid中使用的代码
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
{% if settings.use_favicon %}
<link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />
{% endif %}
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' /><![endif]-->
<title>
{{ page_title }}{% if current_tags %} – {{ 'general.meta.tagged' | t }} "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t }} {{ current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
</title>
{% if page_description %}
<meta name="description" content="{{ page_description }}" />
{% endif %}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="canonical" href="{{ canonical_url }}" />
{% include 'fb-open-graph-tags' %}
{% include 'twitter-card' %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{{ 'styles.scss.css' | asset_url | stylesheet_tag }}
{{ 'social-buttons.scss.css' | asset_url | stylesheet_tag }}
{{ 'jquery.carouFredSel-6.1.0-packed.js' | asset_url | script_tag }}
{{ 'jquery-1.8.2.min.js' | asset_url | script_tag }}
{{ 'test.js' | asset_url | script_tag }}
{% if settings.header_font contains 'Google' %}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family={{ settings.header_font | remove: 'Google+' }}:300,400,700">
{% endif %}
{% if settings.base_font contains 'Google' %}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family={{ settings.base_font | remove: 'Google+' }}:300,400,700">
{% endif %}
{{ 'html5shiv.js' | asset_url | script_tag }}
{{ content_for_header }}
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}
{{ 'jquery-migrate-1.2.0.min.js' | asset_url | script_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
{% if template contains 'customers' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{{ 'customer_area.js' | shopify_asset_url | script_tag }}
{% endif %}
{{ 'scripts.js' | asset_url | script_tag }}
{{ 'social-buttons.js' | asset_url | script_tag }}
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-aanhanger.gif" alt="ek-aanhanger" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-alien.gif" alt="ek-alien" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-artsen.gif" alt="ek-artsen" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-brandweer.gif" alt="ek-brandweer" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-dommel.gif" alt="ek-dommel" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-freudiaans.gif" alt="ek-freudiaans" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-kamikazepiloot.gif" alt="ek-kamikazepiloot" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-langselkaarheen.gif" alt="ek-langselkaarheen" width="350" height="350" />
</div>
</div>
<!-- Begin toolbar -->
<div class="toolbar-wrapper wrapper">
<div class="toolbar span12 clearfix">
<ul class="unstyled">
{% if settings.display_search %}
<li class="search-field fl">
<form class="search" action="/search">
<input type="image" src="{{ 'icon-search.png' | asset_url }}" alt="Go" id="go">
<input type="text" name="q" class="search_box" placeholder="{{ 'layout.header.search' | t }}" value="{{ search.terms }}" />
</form>
</li>
{% endif %}
<li id="cart-target" class="toolbar-cart {% if cart.item_count != 0 %}has-items{% endif %}">
<a href="/cart" class="cart" title="Shopping Cart">
<span class="icon-cart"></span>
<span id="cart-count">{{ cart.item_count }}</span>
{{ 'layout.header.cart' | t }}
</a>
</li>
{% include 'customer_links' %}
<li id="menu-toggle" class="menu-icon fl"><i class="fa fa-bars"></i>{{ 'layout.header.menu' | t }}</li>
</ul>
</div>
</div>
<!-- End toolbar -->
<!-- Begin Mobile Nav -->
<div class="row mobile-nav-wrapper">
<nav class="mobile clearfix">
{% include 'mobile-menu' %}
</nav>
</div>
<!-- End Mobile Nav -->
<!-- Begin wrapper -->
<div id="transparency" class="wrapper clearfix">
<div class="row p0">
<!-- Begin navigation -->
{% if settings.logo_alignment == "center" %}
<div class="span12 clearfix">
<div class="logo">
{% if settings.use_logo %}
<h1><a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" /></a></h1>
{% if template == 'index' %}
<h1 style="display:none"><a href="/">{{ shop.name }}</a></h1>
{% endif %}
{% else %}
<h1><a href="/">{{ shop.name }}</a></h1>
{% endif %}
</div>
</div>
<section id="nav" class="row p30">
<div class="span12">
<nav class="main">
{% include 'dropdown' %}
</nav> <!-- /.main -->
</div>
</section>
{% else %}
<div class="row" id="header">
<div class="span12 border-bottom nav-table">
<div class="nav-logo">
<div class="logo">
{% if settings.use_logo %}
<h1><a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" /></a></h1>
{% if template == 'index' %}
<h1 style="display:none"><a href="/">{{ shop.name }}</a></h1>
{% endif %}
{% else %}
<h1><a href="/">{{ shop.name }}</a></h1>
{% endif %}
</div>
</div>
<div class="nav-links">
<section id="nav">
<nav class="main">
{% include 'dropdown' %}
</nav>
</section>
</div>
</div>
</div>
{% endif %}
<!-- End navigation -->
<!-- Begin content-->
<section id="content" class="clearfix">
{% if template == "list-collections" %}
<div id="collection" class="row">
<div class="span12">
<h1><span>{{ 'collections.list_collections.product_collections' | t }}</span></h1>
</div> <!-- /.span12 -->
</div> <!-- /.row -->
<div class="row products masonry">
{% for collection in collections %}
{% unless collection.all_products_count == 0 or collection.handle == "frontpage" %}
{% include 'collection-loop' %}
{% endunless %}
{% endfor %}
</div> <!-- /#collection.row -->
{% else %}
{{ content_for_layout }}
{% endif %}
</section>
<!-- End content-->
</div>
</div>
<!-- End wrapper -->
<!-- Begin footer -->
<div class="footer-wrapper wrapper">
<footer>
<div class="row">
<div class="span12 full-border"></div>
{% capture footer_columns %}{% if settings.footer_display_blog %}+{% endif %}{% if settings.footer_display_navigation %}+{% endif %}{% if settings.footer_display_newsletter %}+{% endif %}{% if settings.footer_display_social %}+{% endif %}{% endcapture %}
{% if footer_columns.size == 1 %}{% assign footer_span_size = 'span12' %}{% endif %}
{% if footer_columns.size == 2 %}{% assign footer_span_size = 'span6' %}{% endif %}
{% if footer_columns.size == 3 %}{% assign footer_span_size = 'span4' %}{% endif %}
{% if footer_columns.size == 4 %}{% assign footer_span_size = 'span3' %}{% endif %}
<!-- Begin latest blog post -->
{% if settings.footer_display_blog and blogs.news.articles.size > 0 %}
<div class="{{ footer_span_size }}">
{% assign article = blogs.news.articles.first %}
<div class="p30">
<h4>{{ 'layout.footer.latest_news' | t }}</h4>
<p class="p10"><strong>{{ article.title | link_to: article.url }}</strong></p>
<p>{{ article.content | strip_html | truncatewords: 30 }}</p>
</div>
</div>
{% endif %}
<!-- End latest blog post -->
{% if settings.footer_display_navigation and linklists.footer.links.size > 0 %}
<!-- Begin footer navigation -->
<div class="{{ footer_span_size }} footer-menu">
<h4>{{ 'layout.footer.quick_links' | t }}</h4>
<ul class="unstyled">
{% for link in linklists.footer.links %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
<!-- End footer navigation -->
{% endif %}
{% if settings.footer_display_newsletter %}
<!-- Begin newsletter -->
<div class="{{ footer_span_size }}">
<div class="p30">
<h4>{{ 'layout.footer.newsletter_title' | t }}</h4>
<form action="{{ settings.mailing_list_form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<input type="email" value="" placeholder="{{ 'layout.footer.newsletter_email' | t }}" name="EMAIL" id="mail" /><input type="submit" class="btn newsletter" value="{{ 'layout.footer.newsletter_submit' | t }}" name="subscribe" id="subscribe" />
</form>
</div>
</div>
<!-- End newsletter -->
{% endif %}
{% if settings.footer_display_social %}
<!-- Begin social -->
<div class="{{ footer_span_size }}">
<h4>{{ 'layout.footer.follow_us' | t }}</h4>
{% if settings.twitter_link != blank %}<a href="{{ settings.twitter_link }}" title="{{ 'layout.footer.social' | t: shop: shop.name, social_media: 'Twitter' }}" class="icon-social twitter">Twitter</a>{% endif %}
{% if settings.facebook_link != blank %}<a href="{{ settings.facebook_link }}" title="{{ 'layout.footer.social' | t: shop: shop.name, social_media: 'Facebook' }}" class="icon-social facebook">Facebook</a>{% endif %}
{% if settings.youtube_link != blank %}<a href="{{ settings.youtube_link }}" title="{{ 'layout.footer.social' | t: shop: shop.name, social_media: 'Youtube' }}" class="icon-social youtube">YouTube</a>{% endif %}
{% if settings.atom_link != blank %}<a href="{{ settings.atom_link }}" title="{{ 'layout.footer.news' | t: shop: shop.name }}" class="icon-social atom">Blog feed</a>{% endif %}
{% if settings.instagram_link != blank %}<a href="{{ settings.instagram_link }}" title="{{ 'layout.footer.social' | t: shop: shop.name, social_media: 'Instagram' }}" class="icon-social instagram">Instagram</a>{% endif %}
{% if settings.pinterest_link != blank %}<a href="{{ settings.pinterest_link }}" title="{{ 'layout.footer.social' | t: shop: shop.name, social_media: 'Pinterest' }}" class="icon-social pinterest">Pinterest</a>{% endif %}
{% if settings.vimeo_link != blank %}<a href="{{ settings.vimeo_link }}" title="{{ 'layout.footer.social' | t: shop: shop.name, social_media: 'Vimeo' }}" class="icon-social vimeo">Vimeo</a>{% endif %}
{% if settings.tumblr_link != blank %}<a href="{{ settings.tumblr_link }}" title="{{ 'layout.footer.social' | t: shop: shop.name, social_media: 'Tumblr' }}" class="icon-social tumblr">Tumblr</a>{% endif %}
{% if settings.google_link != blank %}<a href="{{ settings.google_link }}" title="{{ 'layout.footer.social' | t: shop: shop.name, social_media: 'Google+' }}" class="icon-social google" rel="publisher">Google+</a>{% endif %}
</div>
<!-- End social -->
{% endif %}
<!-- Begin copyright -->
<div class="span12 tc copyright">
<ul class="credit-cards p10 clearfix">
{% if settings.accept_visa %}<li><img src="{{ 'icon-cc-visa.png' | asset_url }}" alt="Visa" /></li>{% endif %}
{% if settings.accept_mastercard %}<li><img src="{{ 'icon-cc-mastercard.png' | asset_url }}" alt="MasterCard" /></li>{% endif %}
{% if settings.accept_amex %}<li><img src="{{ 'icon-cc-amex.png' | asset_url }}" alt="Amex" /></li>{% endif %}
{% if settings.accept_discover %}<li><img src="{{ 'icon-cc-discover.png' | asset_url }}" alt="Discover" /></li>{% endif %}
{% if settings.accept_paypal %}<li><img src="{{ 'icon-cc-paypal.png' | asset_url }}" alt="PayPal" /></li>{% endif %}
{% if settings.accept_google %}<li><img src="{{ 'icon-cc-google.png' | asset_url }}" alt="Google Wallet" /></li>{% endif %}
{% if settings.accept_bitcoin %}<li><img src="{{ 'icon-cc-bitcoin.png' | asset_url }}" alt="Bitcoin" /></li>{% endif %}
</ul> <!-- /.credit-cards -->
<p>{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: "%Y" }} {{ shop.name }} </p>
</div>
<!-- End copyright -->
</div>
</footer>
</div>
<!-- End footer -->
{{ 'jquery.flexslider-min.js' | asset_url | script_tag }}
{% if settings.enable_product_image_zoom %}
{{ 'jquery.zoom.js' | asset_url | script_tag }}
{% endif %}
{{ 'jquery.tweet.js' | asset_url | script_tag }}
{{ 'jquery.fancybox.js' | asset_url | script_tag }}
</body>
</html>