【发布时间】:2016-06-08 12:16:34
【问题描述】:
我的网站中有一个 camera.js 滑块,我将其替换为 Flexslider。我这样做是因为我无法使 camera.js 滑块可单击,并且我想摆脱“单击此处”按钮。现在我在我的网站中安装了 flexslider,我想带回两个横幅,它们在我的网站中位于我的 camera.js 滑块旁边,但我没有让它工作......
这是我的主页,您可以看到横幅没有显示在滑块的右侧,而是显示在错误的位置:
我想在滑块的右侧有两个尺寸为 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