你能帮我用子弹导航代替缩略图导航吗?
我更喜欢它,因为移动设备功能最少。
https://demo.woothemes.com/storefront/product/build-your-dslr/#camera-body
答案 0 :(得分:0)
将以下代码段添加到活动主题(或子主题,如果有)的functions.php文件中。
add_filter('woocommerce_single_product_carousel_options', 'woocommerce_single_product_carousel_options_custom');
function woocommerce_single_product_carousel_options_custom($args){
$args['controlNav'] = TRUE;
return $args;
}
这会将缩略图导航更改为导航的有序列表(编号为1,2,3等)。您可以使用CSS更改此有序列表的显示。 CSS示例如下:
.flex-control-nav {
position: absolute;
bottom: -45px;
list-style: none;
display: block;
padding: 0;
margin: 0;
width: 100%;
}
.flex-control-nav li {
position: relative;
display: inline-block;
cursor: pointer;
height: 1.5rem;
width: 1.5rem;
margin: 0;
padding: .35714rem;
}
.flex-control-paging li a {
border: 1px solid #2d2d2d;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
background: 0 0;
outline: 0;
line-height: 0;
font-size: 0;
text-indent: -99999px;
color: transparent;
cursor: pointer;
}
.flex-control-paging li a:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
font-size: 60px;
line-height: 20px;
text-align: center;
color: #2d2d2d;
opacity: .6;
}
.flex-control-paging li a, .flex-control-paging li a:before {
height: 1.07143rem;
width: 1.07143rem;
border-radius: 50%;
}
.flex-control-paging li a:before {
display: block;
transition: background .1s ease-out;
}
.flex-control-paging li a:focus, .flex-control-paging li a:hover {
outline: 0;
}
.flex-control-paging li a:focus:before, .flex-control-paging li a:hover:before {
opacity: .8;
}
.flex-control-paging li a:hover:before {
background: #2d2d2d;
}
.flex-control-paging li a.flex-active:before {
background: #666;
}