feat: added carousel

web/templates/web/product_detail.html

@@ -10,14 +10,21 @@
     <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
       <div class="lg:grid lg:grid-cols-2 lg:gap-8 xl:gap-16">
         <div class="shrink-0 max-w-md lg:max-w-lg mx-auto">
-          <img class="w-full dark:hidden" src="{{ product.images.all|first }}" alt=""/>
-          <img class="w-full hidden dark:block" src="{{ product.images.all|first }}" alt=""/>
+
+          <sl-carousel pagination navigation mouse-dragging style="--aspect-ratio: 1/1;">
+            {% for image in product.images.all %}
+              <sl-carousel-item>
+                <img
+                  alt="{{ product.name }}"
+                  src="{{ image.file.url }}"
+                />
+              </sl-carousel-item>
+            {% endfor %}
+          </sl-carousel>
         </div>
 
         <div class="my-4 sm:m-8 lg:m-0">
-          <h1
-            class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white"
-          >
+          <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
             {{ product.name }}
           </h1>
           <div class="my-4 sm:items-center sm:gap-4 sm:flex">
@@ -27,6 +34,8 @@
               {{ product.price.price_with_tax }} €
             </p>
 
+            <sl-rating label="Rating" readonly value="3"></sl-rating>
+
             <!--
             <div class="flex items-center gap-2 mt-2 sm:mt-0">
               <div class="flex items-center gap-1">
@@ -55,8 +64,9 @@
           <div class="my-4 sm:gap-4 items-center flex sm:m-8">
 
             {% if user.is_authenticated %}
-            <div class="mr-2" hx-get="{% url 'web:wishlist_button' pk=product.pk %}" hx-trigger="load, updated-wishlist">
-            </div>
+              <div class="mr-2" hx-get="{% url 'web:wishlist_button' pk=product.pk %}"
+                   hx-trigger="load, updated-wishlist">
+              </div>
             {% endif %}
 
             {% include 'components/cart/add_to_cart.html' %}