猫头鹰轮播控件重复

Question

我的产品图片有不同的颜色，并且我使用猫头鹰旋转木马进行变化。我有一个问题，因为变化只有四个，但是点的变化是7。我只需要显示有图像的点（在这种情况下只有4个）

我尝试将“ display：hide”用于不需要的点变化，但我认为也许还有另一种解决方法。

<div class="noo-product-thumbnail">
  <div class="noo-product-meta">
    <span data-id="1896" class="noo-quick-view icon_zoom-in_alt"></span>
  </div>
  <div class="noo-product-slider owl-carousel owl-theme" style="opacity: 1; display: block;">
    <div class="owl-wrapper-outer autoHeight" style="height: 177px;">
      <div class="owl-wrapper" style="width: 2226px; left: 0px; display: block; transition: all 400ms ease 0s; transform: translate3d(-954px, 0px, 0px);">
        <div class="owl-item" style="width: 159px;"><a href="https://prueba.soygorrion.com.ar/tienda/mochilas/fresa-2/?customize_changeset_uuid=15f4adf2-5a78-4d3c-acd3-8afcbfed8847&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on" class="hover-device"><br>
                                <img width="300" height="300" src="https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-650x650.jpg" class="product-one-thumb" alt="" srcset="https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-650x650.jpg 650w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-150x150.jpg 150w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-32x32.jpg 32w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">                           </a></div>
        <div class="owl-item" style="width: 159px;"><br></div>
        <div class="owl-item" style="width: 159px;"><a href="https://prueba.soygorrion.com.ar/tienda/mochilas/fresa-2/?customize_changeset_uuid=15f4adf2-5a78-4d3c-acd3-8afcbfed8847&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on" class="hover-device"><br>
                                <img width="300" height="300" src="https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-650x650.jpg" class="product-one-thumb" alt="" srcset="https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-650x650.jpg 650w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-150x150.jpg 150w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-32x32.jpg 32w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">                           </a></div>
        <div class="owl-item" style="width: 159px;"><br></div>
        <div class="owl-item" style="width: 159px;"><a href="https://prueba.soygorrion.com.ar/tienda/mochilas/fresa-2/?customize_changeset_uuid=15f4adf2-5a78-4d3c-acd3-8afcbfed8847&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on" class="hover-device"><br>
                                <img width="300" height="300" src="https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-650x650.jpg" class="product-one-thumb" alt="" srcset="https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-650x650.jpg 650w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-150x150.jpg 150w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-32x32.jpg 32w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">                           </a></div>
        <div class="owl-item" style="width: 159px;"><br></div>
        <div class="owl-item active" style="width: 159px;"><a href="https://prueba.soygorrion.com.ar/tienda/mochilas/fresa-2/?customize_changeset_uuid=15f4adf2-5a78-4d3c-acd3-8afcbfed8847&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on" class="hover-device"><br>
                                <img width="300" height="300" src="https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-650x650.jpg" class="product-one-thumb" alt="" srcset="https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-650x650.jpg 650w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-150x150.jpg 150w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-32x32.jpg 32w, https://prueba.soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">                           </a></div>
      </div>
    </div>



    <div class="owl-controls clickable">
      <div class="owl-pagination">
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page active"><span class=""></span></div>
      </div>
    </div>
  </div>
</div>

这是CSS

.woocommerce .owl-theme .owl-controls .owl-page.active span, .woocommerce .owl-theme .owl-controls .owl-page span:hover, .noo_countdown .custom_link:hover, .noo_countdown .custom_link:focus, .noo_countdown.noo_countdown_left .noo_countdown_content .custom_link:hover, .noo_countdown.noo_countdown_left .noo_countdown_content .custom_link:focus, .woocommerce-cart table.cart td.actions .continue, .woocommerce-cart table.cart td.actions .empty-cart:hover, .woocommerce-cart table.cart td.actions .continue:hover, .woocommerce-cart table.cart td.actions .button:hover, body .vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-tabs-list .vc_tta-tab.vc_active > a {
    border-color: #dd9933;
}
.woocommerce div.noo-product-item .noo-product-inner .noo-product-thumbnail .noo-product-meta .compare-button a:hover, .woocommerce div.noo-product-item .noo-product-inner .noo-product-thumbnail .noo-product-meta .yith-wcwl-add-to-wishlist .add_to_wishlist:hover, .woocommerce div.noo-product-item .noo-product-inner .noo-product-thumbnail .noo-product-meta .noo-quick-view:hover, .woocommerce div.noo-product-item .noo-product-inner .noo-product-thumbnail .noo-product-meta .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse:hover, .woocommerce .owl-theme .owl-controls .owl-page.active span, .woocommerce .owl-theme .owl-controls .owl-page span:hover, .noo_countdown .custom_link:hover, .noo_countdown .custom_link:focus, .woocommerce span.onsale, .noo_countdown.noo_countdown_left .noo_countdown_content .noo_countdown_date .countdown-section, .noo-shblog-item.style_3 .noo-shblog-entry .view_link:hover, .noo-shblog-item.style_3 .noo-shblog-entry .view_link, .noo-countdown-product a.add_to_cart_button, .noo-sh-mailchimp.style_three form input[type='submit'], #comments #respond .form-submit input[type="submit"], .woocommerce-cart table.cart th, .woocommerce-cart table.cart td.actions .continue, .woocommerce-cart table.cart td.actions .empty-cart:hover, .woocommerce-cart table.cart td.actions .continue:hover, .woocommerce-cart table.cart td.actions .button:hover, .noocart-coupon .noo-apply-coupon, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout #payment .place-order #place_order, .button-404, .noo-custom-form-7 input[type='submit'], .woocommerce div.product div.entry-summary form.cart .button, .woocommerce div.product div.entry-summary .yith-wcwl-add-to-wishlist .add_to_wishlist:hover, .woocommerce div.product div.entry-summary .compare:hover, .quick-view-wrap .quick-content .quick-right .price, .woocommerce div.product div.entry-summary .noo-social-share .noo-share {
    background: #dd9933;
}
.woocommerce .owl-theme .owl-controls .owl-page.active span {
    background: #4666a3;
    border-color: #4666a3;
}
.woocommerce .owl-theme .owl-controls .owl-page span {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0 4px;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #cccccc;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
    filter: Alpha(Opacity=100);
    opacity: 1;
}
.owl-theme .owl-controls .owl-page span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);
    opacity: 0.5;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #869791;
}
* {
    font-family: "helvetica","arial","sans-serif";
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.owl-controls .owl-page, .owl-controls .owl-buttons div {
    cursor: pointer;
}
.owl-theme .owl-controls {
    margin-top: 6px;
    text-align: center;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.woocommerce .products ul li, .woocommerce ul.products li {
    list-style: none outside;
}
.widget ul li {
    line-height: 2px;
}
.widget ul li {
    line-height: 36px;
}
user agent stylesheet
li {
    text-align: -webkit-match-parent;
}
.woocommerce .products ul, .woocommerce ul.products {
    margin: 0 0 1em;
    padding: 0;
    list-style: none outside;
    clear: both;
}
.widget ul {
    list-style: none;
    padding: 0;
}
user agent stylesheet
ul {
    list-style-type: disc;
}
body {
    font-family: "Francois One",sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #666666;
    background-color: #f8f8f8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: helvetica,arial,sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(221, 153, 51);
background-image: none;
background-origin:

Answer 1

您不需要具有“可单击的猫头鹰控件”的HTML

尝试仅删除它，看看它没有什么作用。

我本来会对此发表评论，但缺乏这样做的声誉。