@push('header-css')
<style>
    .component-list .widget-container:not(.no-padding) .widget-product {
        height: 320px !important;
    }
</style>
@endpush

<div class="styles-module_sliderBase__swkx1 product-slider" data-testid="carousel">
    <div 
        data-arrow="left" 
        onclick="sideScroll(this.parentElement.querySelector('[data-widget=carousel-container]'),'left',25,1000,100)"
    >
        <button class="arrow-btn"></button>
    </div>
    
    <div 
        data-arrow="right" 
        onclick="sideScroll(this.parentElement.querySelector('[data-widget=carousel-container]'),'right',25,1000,100)"
    >
        <button class="arrow-btn"></button>
    </div>
    
    <div class="styles-module_slider__o0fqa" data-widget="carousel-container">
        @foreach($products as $product)
            @include('web.themes.shella.components.products.trendyol.carousel-item', [
                'product' => $product
            ])
        @endforeach
    </div>
</div>
