Как уменьшить скорость слайдера в Django?

Пожалуйста, помогите уменьшить скорость, она слишком быстрая. Много искал в google и везде есть решение на Bootstrap. Я даже пробовал Bootstrap, это было слишком медленно и разные иконки, которые не выглядели хорошо. Также Bootstrap версия центрирует иконки PREV и NEXT для каждого изображения, что также выглядит не очень хорошо, так как у меня разная высота изображений.

Есть ли способ изменить скорость в моей текущей карусели? Пожалуйста, помогите.

мой CSS выглядит как

/* PRODUCT DETAIL SLIDER START */
.product_detail-slider{
  position: relative;
}

.product_detail-slider .owl-stage-outer{
  overflow-x: hidden;
}

.product_detail-slider .owl-stage{
  display: flex;
}

.product_detail-slider .owl-nav .owl-prev{
  position: absolute;
  top: calc(50% - 80px);;
  left: 0;
  border: none;
  background-color: transparent;
}

.product_detail-slider .owl-nav .owl-prev span{
  color: rgba(0, 0, 0, 0.30);
  font-size: 80px;
  transition: all 2s;
}

.product_detail-slider .owl-nav .owl-prev span:hover{
  color: #000000;
}

.product_detail-slider .owl-nav .owl-next{
  position: absolute;
  top: calc(50% - 80px);
  right: 0;
  border: none;
  background-color: transparent;
  
}

.product_detail-slider .owl-nav .owl-next span{
  color: rgba(0, 0, 0, 0.30);
  font-size: 80px;
  transition: all 2s;
}

.product_detail-slider .owl-nav .owl-next span:hover{
  color: #000000;
}

.owl-dots{
  display: none;
}

/* PRODUCT DETAIL SLIDER END */

мой HTML

<div class="product_detail-slider">
    <div class="product_detail-slider_block">
        <img src="{{ product.image_url }}" alt="" style="width:100%; padding-bottom: 20px;">
    </div>
    {% if product.image_2_url %}
    <div class="product_detail-slider_block">
        <img src="{{ product.image_2_url }}" alt="" style="width:100%; padding-bottom: 20px;">
    </div>
    {% endif %}
    {% if product.image_3_url %}
    <div class="product_detail-slider_block">
        <img src="{{ product.image_3_url }}" alt="" style="width:100%; padding-bottom:20px;">
    </div>
    {% endif %}
    {% if product.image_4_url %}
    <div class="product_detail-slider_block">
        <img src="{{ product.image_4_url }}" alt="" style="width:100%; padding-bottom:20px;">
    </div>
    {% endif %}
    {% if product.image_5_url %}
    <div class="product_detail-slider_block">
        <img src="{{ product.image_5_url }}" alt="" style="width:100%; padding-bottom:20px;">
    </div>
    {% endif %}
    {% if product.image_6_url %}
    <div class="product_detail-slider_block">
        <img src="{{ product.image_6_url }}" alt="" style="width:100%; padding-bottom:20px;">
    </div>
    {% endif %}
</div>

Вернуться на верх