Update app.py

app.py

@@ -94,6 +94,7 @@ def catalog():
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Каталог</title>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
         <style>
             * {
                 margin: 0;
@@ -293,9 +294,37 @@ def catalog():
                 cursor: pointer;
             }
 
-            /* Image Carousel Styles */
-            .carousel-inner > .carousel-item > img {
-                margin: 0 auto;
+            /* Swiper Styles */
+            .swiper-container {
+                width: 100%;
+                height: 300px;
+            }
+
+            .swiper-slide {
+                text-align: center;
+                font-size: 18px;
+                background: #fff;
+
+                /* Center slide text vertically */
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: -webkit-flex;
+                display: flex;
+                -webkit-box-pack: center;
+                -ms-flex-pack: center;
+                -webkit-justify-content: center;
+                justify-content: center;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                -webkit-align-items: center;
+                align-items: center;
+            }
+
+            .swiper-slide img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
             }
         </style>
     </head>
@@ -334,6 +363,7 @@ def catalog():
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
         <script>
             // Function to open the modal
             function openModal(index) {
@@ -352,9 +382,28 @@ def catalog():
                     .then(response => response.text())
                     .then(data => {
                         document.getElementById('modalContent').innerHTML = data;
+                        // Initialize Swiper after the content is loaded
+                        initializeSwiper();
                     });
             }
 
+            function initializeSwiper() {
+                var swiper = new Swiper('.swiper-container', {
+                    slidesPerView: 1,
+                    spaceBetween: 30,
+                    loop: true,
+                    grabCursor: true, // Enables the ability to grab with a cursor
+                    pagination: {
+                        el: '.swiper-pagination',
+                        clickable: true,
+                    },
+                    navigation: {
+                        nextEl: '.swiper-button-next',
+                        prevEl: '.swiper-button-prev',
+                    },
+                });
+            }
+
             // Close the modal if the user clicks outside of it
             window.onclick = function(event) {
                 if (event.target == document.getElementById('productModal')) {
@@ -377,35 +426,25 @@ def product_detail(index):
     detail_html = '''
     <div class="container">
         <h2>{{ product['name'] }}</h2>
-        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
-            <ol class="carousel-indicators">
-                {% if product.get('photos') %}
-                    {% for photo in product['photos'] %}
-                        <li data-target="#carouselExampleIndicators" data-slide-to="{{ loop.index0 }}" {% if loop.first %}class="active"{% endif %}></li>
-                    {% endfor %}
-                {% endif %}
-            </ol>
-            <div class="carousel-inner">
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
                 {% if product.get('photos') %}
                     {% for photo in product['photos'] %}
-                        <div class="carousel-item {% if loop.first %}active{% endif %}">
-                            <img class="d-block w-100" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
+                        <div class="swiper-slide">
+                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
                         </div>
                     {% endfor %}
                 {% else %}
-                    <div class="carousel-item active">
-                        <img class="d-block w-100" src="https://via.placeholder.com/300" alt="No Image">
+                    <div class="swiper-slide">
+                        <img src="https://via.placeholder.com/300" alt="No Image">
                     </div>
                 {% endif %}
             </div>
-            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
-                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                <span class="sr-only">Previous</span>
-            </a>
-            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
-                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                <span class="sr-only">Next</span>
-            </a>
+            <!-- Add Pagination -->
+            <div class="swiper-pagination"></div>
+            <!-- Add Navigation -->
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
         </div>
         <p><strong>Цена:</strong> {{ product['price'] }} ₽</p>
         <p><strong>Описание:</strong> {{ product['description'] }}</p>
@@ -425,8 +464,6 @@ def admin():
             photos_files = request.files.getlist('photos')
             photos_list = []
             if photos_files:
-                if len(photos_files) > 5:
-                    photos_files = photos_files[:5]
                 for photo in photos_files:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
@@ -473,8 +510,6 @@ def admin():
             # Если загружены новые фото, обновляем список фотографий товара
             if photos_files and any(photo.filename for photo in photos_files):
                 new_photos_list = []
-                if len(photos_files) > 5:
-                    photos_files = photos_files[:5]
                 for photo in photos_files:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)