大卡特尔-幻灯片问题

Question

首先链接到我的网站：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

对不起，这篇帖子到处都是。感谢您为我的产品图片和幻灯片找到解决方案。

Answer 1

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

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

Luna主题使用Flexslider进行幻灯片演示代码，将其添加到产品页面或商店中的其他内置页面应该不会有任何问题。Flexslider还支持多个幻灯片，因此您可能想在https://github.com/woothemes/FlexSlider有关如何做到这一点的信息。

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