marketplaces/src/app/components/items-carousel/items-carousel.component.html

<div class="carousel-container" [class.novo-theme]="isnovo">
    @if (loading()) {
        <div class="carousel-loading">
            <div class="spinner"></div>
            <p>Загрузка товаров...</p>
        </div>
    } @else if (products().length > 0) {
        <p-carousel 
            [value]="products()" 
            [numVisible]="6" 
            [numScroll]="1" 
            [circular]="true" 
            [responsiveOptions]="responsiveOptions" 
            [autoplayInterval]="3000"
            [showNavigators]="true"
            [showIndicators]="true">
            <ng-template let-product pTemplate="item">
                <div class="item-card">
                    <a [routerLink]="['/item', product.itemID]" class="item-link">
                        <div class="item-image">
                            <img [src]="getItemImage(product)" [alt]="product.name" loading="lazy" />
                            @if (product.discount > 0) {
                                <div class="discount-badge">-{{ product.discount }}%</div>
                            }
                        </div>
                        
                        <div class="item-details">
                            <h3 class="item-name">{{ product.name }}</h3>
                            
                            <div class="item-rating" *ngIf="product.rating">
                                <span class="rating-stars">⭐ {{ product.rating }}</span>
                                <span class="rating-count">({{ product.callbacks?.length || 0 }})</span>
                            </div>
                            
                            <div class="item-price-row">
                                <div class="item-price">
                                    @if (product.discount > 0) {
                                        <span class="original-price">{{ product.price }} {{ product.currency }}</span>
                                        <span class="discounted-price">{{ getDiscountedPrice(product) | number:'1.0-0' }} {{ product.currency }}</span>
                                    } @else {
                                        <span class="current-price">{{ product.price }} {{ product.currency }}</span>
                                    }
                                </div>
                                <button class="cart-icon-btn" (click)="addToCart($event, product)" title="Добавить в корзину">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="9" cy="21" r="1"></circle>
                                        <circle cx="20" cy="21" r="1"></circle>
                                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </a>

                </div>
            </ng-template>
            <ul class="p-carousel-indicator-list" data-pc-section="indicatorlist"><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="1" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="2" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="3" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="4" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="5" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="6" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator p-carousel-indicator-active" data-p-active="true" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="0" aria-label="7" aria-current="page" data-pc-section="indicatorbutton"></button></li><!----></ul>
        </p-carousel>
    }
</div>