【问题标题】:How do i add two banners in Magento homepage next to my flexslider?如何在我的 flexslider 旁边的 Magento 主页中添加两个横幅?
【发布时间】:2016-06-08 12:16:34
【问题描述】:

我的网站中有一个 camera.js 滑块,我将其替换为 Flexslider。我这样做是因为我无法使 camera.js 滑块可单击,并且我想摆脱“单击此处”按钮。现在我在我的网站中安装了 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>

只是为了澄清:

  • 我使用了代码:script type="text/javascript">//等

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

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

所以我的问题是,我必须在代码中进行哪些调整才能在 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;
}

【问题讨论】:

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


    【解决方案1】:

    这取决于您的 CSS。

    检查是否:

    • 您的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 结束标签。

    【讨论】:

    • 我用flexslider的CSS代码更新了原帖,滑块的最大宽度应该是正确的,它是700px。横幅块有一个浮动:正确,规则。
    • 尝试给 .flexslider 类一个 float: left;
    • 该网站目前是否上线?我需要检查它以了解发生了什么。
    • 您能否将我的答案标记为正确的答案,因为它解决了您的第一个问题?谢谢。您的脚本问题是另一个问题。我会尝试将滑块和横幅从 .container 中拉出,而不是将其放入 .container 中。看看有没有帮助。
    【解决方案2】:

    啊哈!这帮助了我!现在就是它需要的样子!非常感谢!

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

    唯一仍然存在问题的是,由于使用脚本来保持下拉菜单正常工作,它会将定价布局更改为默认 magento...我该如何解决这个问题?

    【讨论】:

    • 问题是,当宽度为 967 到 1167 时,它会将横幅放置在一个奇怪的地方
    猜你喜欢
    • 1970-01-01
    • 2013-05-24
    • 2014-06-07
    • 1970-01-01
    • 2017-06-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-23
    相关资源
    最近更新 更多