0

首先是我网站的链接：http: //johnathonpowers.bigcartel.com/

我一直在玩幻灯片，并且能够将其从主页迁移到自定义页面。最初在测试页面上有它，但认为这是导致页脚问题（可能是由于页脚中的项目太多），它暂时在我的关于页面上。

所以我移动了这个：

{% if theme.image_sets.slideshow.size > 0 %}
<div class="flexslider">
<ul class="slides">
  {% for image in theme.image_sets.slideshow %}
  <li><img src="{{ image.url }}"></li>
  {% endfor %}
</ul>
</div>
{% endif %}

...从我的主页到我的关于我的页面。这样做时，箭头不再可见。我尝试了一些应该使它们始终出现的代码，但仍然没有运气。

这是我在 CSS 页面末尾添加的内容。虽然没有帮助。

.flex-direction-nav li a { 
 opacity: 1; 
 }

我是否可以在我的产品页面中显示此幻灯片？或者在整个网站上有多个幻灯片？

我知道我可能已经相当先进了，但我的最终目标是制作产品图片的幻灯片来代替产品图片的“列表”。添加产品图像时，它会将它们放在产品页面右侧的一列中，我认为各种幻灯片可能看起来更好。

这是一个示例页面...（查看图像如何一个接一个）。我不能发布两个以上的链接。请查看“不眠砖”而不是框架页面。

实际上，我试图找出一种方法来获取图像，然后单击下方的小图像（例如服装网站或其他东西）以更改图像。缩放功能也是我正在阅读的关于通过称为 jquery 的东西添加的内容？

最终，我想在我的产品页面上执行此操作（下面有缩略图的大图）： http ://www.elevateweb.co.uk/image-zoom

对不起，这篇文章到处都是。感谢您为我的产品图片和幻灯片找到解决方案的任何帮助。

4

1 回答 1

0

您可以通过将以下内容添加到底部的自定义设计 > 高级 > CSS 来强制这些箭头出现在自定义页面上：

#page_body .flex-direction-nav a {
  display: block;
}

并且 Luna 主题使用 Flexslider 进行幻灯片代码，将其添加到产品页面或商店中的其他内置页面应该没有任何问题。Flexslider 也支持多个幻灯片，因此您可能需要在https://github.com/woothemes/FlexSlider上查看他们的文档以获取有关如何执行此操作的信息。

至于图像缩放脚本，我在这里回答了一个问题：https ://stackoverflow.com/a/22665701/2445073

于 2014-04-23T18:09:17.903 回答