实现Woocommerce产品页缩略图在左边或右边,修改css即可实现,同时也可以把缩略图框定在一定的高度或长度内,不使用js即可轻松实现滚动效果。
Woocommerce产品页缩略图在左边并支持滚动代码如下
竖向代码没滚动条
.woocommerce-product-gallery {
display: flex;
}
.woocommerce-product-gallery .flex-control-thumbs {
order: -10;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: 100%;
padding-top: 0;
padding-bottom: 5px;
}
竖向代码带滚动条
.woocommerce div.product div.images .flex-control-thumbs li {
padding: 5px 5px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media (min-width: 420px) {
.woocommerce-page div.product div.images {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
}
.woocommerce div.product div.images .flex-control-thumbs {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1 0 80px;
flex: 1 0 80px;
/* Adjust PX to suit width of thumbnails */
max-height: 425px;
/* Adjust Height to Image height on desktop */
overflow: auto;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: 100%;
padding: 0 10px 10px 0;
}
}
横向代码
.woocommerce div.product div.images .flex-control-thumbs li {
padding: 5px 5px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex: 1 0 25%;
flex: 1 0 25%;
}
.woocommerce div.product div.images .flex-control-thumbs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: auto;
}
竖向代码在手机端恢复为默认状态,毕竟手机端正常是不需要实现把缩略图竖向摆放,再在手机端定义以下css,即可把缩略图缩小成一小块,与常规手机端模式一致。
.woocommerce div.product div.images .flex-control-thumbs li {
width: 10px;
}
.product ol.flex-control-nav.flex-control-thumbs {
justify-content: center;
display: flex;
}
样式大小这些可以自己修改一下就可以,默认滚动条是浏览器默认滚动条,支持所有浏览器。
添加css去掉滚动条,整体更加美观
.woocommerce ::-webkit-scrollbar{
display:none;
}
以上代码火狐浏览器不能去掉滚动条,需要添加以下css
.flex-control-thumbs {
scrollbar-width: none;
}