私のウェブサイトにcamera.jsスライダーがあり、Flexsliderに置き換えました。これを行ったのは、camera.jsスライダーをクリック可能にすることができず、[ここをクリック]ボタンを削除したかったためです。今、私は私のウェブサイトにフレックススライダーを取り付けました。私のサイトのcamera.jsスライダーの隣にある2つのバナーを戻したいのですが、機能しません...
これは私のホームページです。バナーはスライダーの右側には表示されませんが、間違った場所に表示されます。
スライダーの右側に、サイズ381 x219のバナーを上下に2つ配置したいと思います。
コードは次のとおりです。
<div class="container">
<div class="row">
<div class="span12">
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="25"}}
</script>
<ul class="banner-block-right">
<li><a href="{{store url='nieuwe-producten'}}"> <img src="{{skin url='images/media/banners-8.png'}}" alt="" /> </a></li>
<li><a href="{{store url='klantenservice'}}"> <img src="{{skin url='images/media/banners-7.png'}}" alt="" /> </a></li>
</ul>
</div>
</div>
</div>
明確にするために:
ナビゲーションバーに問題があったため、新しいスライダーを入れても機能しなくなりました。
だから私の質問は、フレックススライダーの隣に2つの小さなバナーを配置するためにコードでどのような調整を行う必要があるかということです。
ところで。スクリプトを使用してナビゲーションバーを機能させると、デフォルトのMagentoの価格設定レイアウトが復活しました。これは、ナビゲーションバーを機能させるか、正しいレイアウトでMagentoの価格設定を取得するようなものでした。私はナビゲーションバーを選びます笑、誰かがこれの修正を知っていますか?
編集:flexsliderのCSSコード
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
display: block;
max-width: 100%; height: auto; margin: - auto;
}
それはあなたのCSSに依存します。
次のことを確認してください。
それが機能しない場合は、CSSの関連部分を投稿することができます。
ウェブページを見た後に更新する
問題は、ul要素がdiv行内にネストされていないことです。Webページを調べると、次のネスト構造が得られます。
<div class="container">
<div class="row">
<div class="span12">
<script type="text/javascript">
<script src="http://www.site.nl/js/magestore/bannerslider/jquery.flexslider.js">
<link media="all" href="http://www.site.nl/skin/frontend/base/default/css/magestore/bannerslider/flexslider.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
<div class="flexslider flexslider-7-1">
<script type="text/javascript">
</div>
</div>
<script type="text/javascript">
</div>
<ul class="banner-block-right">
したがって、ウィジェットは.containerと.rowdivを閉じています。挿入するテンプレートには、おそらく最後に多くのdiv終了タグが必要です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加