Hiding the list affects the display of the slider - how to get around this?

Question

iPhone

Hello! When dynamically filling the list, the ul is also dynamically filled with the carousel slides with the same data. Because infa is duplicated, I need to hide the list and leave the slider visible. But the problem is that if I set display:none to the list or elements, then the sliders are also hidden - how can I get around this moment?

<div class="col-md-10">
  <h3>ДОБАВЛЕННЫЕ</h3>
  <div id="foot-carousel" class="owl-carousel" style="opacity: 0;">
    <div>Корзина пуста.</div>
    <div>
      <a href="#">
        <img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="top-item-3">
      </a>
      <div class="product-text">
        <div class="product-name">Сибарис с картошкой</div>
      </div>
      <span class="cart-quantity">
  <a href="#" class="remove-item" title="Удалить эту позицию">remove</a>						</span>

    </div>
    <div>

      <a href="#">
        <img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="top-item-2">
      </a>

      <div class="product-text">
        <div class="product-name">Пицца вегетарианская</div>
      </div>

      <span class="cart-quantity">
              <a href="#" class="remove-item" title="Удалить эту позицию">remove</a>						</span>

    </div>
  </div>
  <div class="widget_shopping_cart_content">

    <ul class="cart_list product_list_widget ">


      <li>

        <a href="#">
          <img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="top-item-3">
        </a>

        <div class="product-text">
          <div class="product-name">Сибарис с картошкой</div>
        </div>

        <span class="cart-quantity">
              <a href="#" class="remove-item" title="Удалить эту позицию">remove</a>						</span>

      </li>
      <li>

        <a href="#">
          <img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="top-item-2">
        </a>

        <div class="product-text">
          <div class="product-name">Пицца вегетарианская</div>

        </div>

        <span class="cart-quantity">
              <a href="#" class="remove-item" title="Удалить эту позицию">remove</a>						</span>

      </li>
      <li>

        <a href="#">
          <img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="top-item-1">
        </a>

        <div class="product-text">
          <div class="product-name">Шашлык из мяса</div>


          <span class="cart-quantity">
              <a href="#" class="remove-item" title="Удалить эту позицию">remove</a>						</span>

      </li>


    </ul>

    </div>
  </div>

$(".add_to_cart_button").click(function() {
  $('#foot-carousel').append('<div>' + $('.cart_list li:last').html() + '</div>');
  $(".fixed-bottom").show().fadeTo("slow");
});

Answer 1

Frame the code in a tag.
Without information, I can only advise you to override the display property for the slider. Something like this.

ul {
display: none;
}
#carousel{
display: block !important;
}