Промежуточная

WebApp/Pages/ProductPage.cshtml

@@ -15,9 +15,22 @@
 
 <div class="container my-5">
     <div class="row">
-        <div class="col-md-6">
+        @* <div class="col-md-6">
             <img src="data:image/png;base64,@Convert.ToBase64String(Model.GetMediaByProduct(Model.productModel))" class="img-fluid" alt="@Model.productModel.Name">
+        </div> *@
+        <div class="wrap">
+            <div class="window">
+                <div id="carousel">
+                    @for (int i = 0; i < Model.GetAllMediaFilesByProduct(Model.productModel).Count; i++)
+                    {
+                        <span class="slide" id=@{"b"+i;}><img src="data:image/png;base64,@Convert.ToBase64String(Model.GetAllMediaFilesByProduct(Model.productModel)[i].Image)" class="img-fluid" alt="@Model.productModel.Name"></span>
+                    }                                  
+                </div>
+            </div>
+            <span id="prev">PREV</span>
+            <span id="next">NEXT</span>
         </div>
+
         <div class="col-md-6">
             <h1>@Model.productModel.Name</h1>
             <div class="star-rating">
@@ -67,3 +80,50 @@
         </div>
     </div>
 </div>
+
+<script>
+    var carousel = $('#carousel'),
+        threshold = 150,
+        slideWidth = 500,
+        dragStart,
+        dragEnd;
+
+    $('#next').click(function () { shiftSlide(-1) })
+    $('#prev').click(function () { shiftSlide(1) })
+
+    carousel.on('mousedown', function () {
+        if (carousel.hasClass('transition')) return;
+        dragStart = event.pageX;
+        $(this).on('mousemove', function () {
+            dragEnd = event.pageX;
+            $(this).css('transform', 'translateX(' + dragPos() + 'px)')
+        })
+        $(document).on('mouseup', function () {
+            if (dragPos() > threshold) { return shiftSlide(1) }
+            if (dragPos() < -threshold) { return shiftSlide(-1) }
+            shiftSlide(0);
+        })
+    });
+
+    function dragPos() {
+        return dragEnd - dragStart;
+    }
+
+    function shiftSlide(direction) {
+        if (carousel.hasClass('transition')) return;
+        dragEnd = dragStart;
+        $(document).off('mouseup')
+        carousel.off('mousemove')
+            .addClass('transition')
+            .css('transform', 'translateX(' + (direction * slideWidth) + 'px)');
+        setTimeout(function () {
+            if (direction === 1) {
+                $('.slide:first').before($('.slide:last'));
+            } else if (direction === -1) {
+                $('.slide:last').after($('.slide:first'));
+            }
+            carousel.removeClass('transition')
+            carousel.css('transform', 'translateX(0px)');
+        }, 700)
+    }
+</script>

WebApp/Pages/ProductPage.cshtml.cs

@@ -16,12 +16,21 @@ namespace WebApp.Pages
         {
             productModel = APIClient.GetRequest<ProductViewModel>($"Product/GetProduct?id={id}");
         }
+
         public byte[] GetMediaByProduct(ProductViewModel productModel)
         {
             MediaByProductsModel = APIClient.GetRequest<Dictionary<Guid, List<MediaFileViewModel>>>($"MediaFile/GetByProducts");
             MediaByProductsModel.TryGetValue(productModel.Id, out List<MediaFileViewModel> models);
             return models[0].Image;
         }
+
+        public List<MediaFileViewModel> GetAllMediaFilesByProduct(ProductViewModel productModel)
+        {
+            MediaByProductsModel = APIClient.GetRequest<Dictionary<Guid, List<MediaFileViewModel>>>($"MediaFile/GetByProducts");
+            MediaByProductsModel.TryGetValue(productModel.Id, out List<MediaFileViewModel> models);
+            return models;
+        }
+
         public IActionResult OnPostAsync(Guid id, int count)
         {
             Amount = count;

WebApp/Pages/Shared/_Layout.cshtml.css

@@ -46,3 +46,73 @@ button.accept-policy {
   white-space: nowrap;
   line-height: 60px;
 }
+
+$carousel-width: 600px;
+$carousel-height: 300px;
+
+body {
+    background: #333;
+    color: #fff;
+    font-size: 22pt;
+    text-align: center;
+    font-family: 'Teko';
+    letter-spacing: 0.15em;
+}
+
+body * {
+    -webkit-user-select: none
+}
+
+.wrap {
+    position: relative;
+    width: $carousel-width;
+    height: 300px;
+    margin: 0 auto;
+    box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.25);
+}
+
+.window {
+    overflow: hidden;
+    position: relative;
+    background: #222;
+}
+
+#carousel {
+    width: 10000px;
+    position: relative;
+    top: 0;
+    left: -450px;
+}
+
+.slide {
+    height: 300px;
+    width: 500px;
+    cursor: pointer;
+    float: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+#prev {
+    left: 0
+}
+
+#next {
+    right: 0
+}
+
+.transition {
+    transition: .7s;
+}
+#prev {
+    left: 0
+}
+
+#next {
+    right: 0
+}
+
+.transition {
+    transition: .7s;
+}