如何在我的flexslider旁边的Magento主页中添加两个横幅?

时间:2016-06-08 12:16:35

标签: css magento content-management-system flexslider banner

我的网站上有一个camera.js滑块,我替换为Flexslider。我这样做是因为我无法使camera.js滑块可以点击,我想摆脱“点击这里”#39;按钮。现在我在我的网站上安装了flexslider我想带回两个横幅,哪个在我的站点旁边我的camera.js滑块,但我不能让它工作......

这是我的主页,因为您可以看到横幅未显示在滑块右侧,但它们显示在错误的位置:

http://imgur.com/j8PVOuR

我希望滑块右侧有两个尺寸为381 x 219的横幅,一个在另一个上面。

代码如下:

<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>

只是为了澄清:

  • 我使用了代码:脚本类型=&#34; text / javascript&#34;&gt; //等

因为我的导航栏出现问题,所以当我放入新滑块时,它不再起作用了。

  • 我把滑块放在一个小部件中只是因为我认为这会更容易。

所以我的问题是,我必须在代码中进行哪些调整才能在flexslider旁边放置两个小横幅?

顺便说一下。当我使用脚本让我的导航栏工作时,默认的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;
}

2 个答案:

答案 0 :(得分:0)

这取决于你的CSS。

检查是否:

  • 你的横幅广告权利课程没有“明确的”字样。风格规则就可以了。 &#39;清除&#39;清除浮子。
  • 检查滑块和banner-block-right是否都有浮动规则。
  • 检查滑块是否太宽。

如果它不起作用,你可以发布你的CSS的相关部分。

看到网页后更新

问题是你的ul元素没有嵌套在div行中。检查您的网页为我提供了以下嵌套结构:

<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和.row div。您插入的模板可能在最后有很多div结束标记。

答案 1 :(得分:0)

啊哈!这帮我了!现在它是如何需要的!非常感谢你!

我摆脱了小部件,并且在3个结束div之后我将代码粘贴到cms中。现在它也响应:)

唯一仍然存在问题的是因为使用脚本来保持下拉列表的工作原因是它将定价的布局更改为默认的magento ...我该如何解决这个问题?