From 82abf4518eeb7e70801ec60dd0d23a2904392609 Mon Sep 17 00:00:00 2001
From: Corentin Huet <corentin.huet@ldc.fr>
Date: Fri, 27 Mar 2026 10:15:35 +0100
Subject: [PATCH 1/3] feat: :sparkles: add navigation arrows on mobile

---
 resources/sass/fo/pages/_unveil.scss      | 12 ++++
 resources/ts/fo/base/common.ts            |  6 +-
 resources/views/fo/pages/unveil.blade.php | 74 +++++++++++++----------
 3 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/resources/sass/fo/pages/_unveil.scss b/resources/sass/fo/pages/_unveil.scss
index 36269fc..52f91cc 100644
--- a/resources/sass/fo/pages/_unveil.scss
+++ b/resources/sass/fo/pages/_unveil.scss
@@ -16,6 +16,18 @@
         }
     }
 
+    .swiper-button-prev-custom {
+        top: 10%;
+        left: 1rem;
+        transform: translateY(-50%) rotate(180deg);
+    }
+
+    .swiper-button-next-custom {
+        top: 10%;
+        right: 1rem;
+        transform: translateY(-50%);
+    }
+
     .history {
         #historical-milestone-carousel {
             .carousel-container {
diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts
index 3a07c40..51cf778 100644
--- a/resources/ts/fo/base/common.ts
+++ b/resources/ts/fo/base/common.ts
@@ -159,11 +159,15 @@ document.addEventListener("DOMContentLoaded", function () {
             },
         },
         "swiper-year": {
-            modules: [Keyboard],
+            modules: [Keyboard, Navigation],
             grabCursor: true,
             slidesPerView: 1.5,
             centeredSlides: true,
             slideToClickedSlide: true,
+            navigation: {
+                nextEl: ".year-next",
+                prevEl: ".year-prev",
+            },
             keyboard: {
                 enabled: true,
             },
diff --git a/resources/views/fo/pages/unveil.blade.php b/resources/views/fo/pages/unveil.blade.php
index bba27b7..95ec162 100644
--- a/resources/views/fo/pages/unveil.blade.php
+++ b/resources/views/fo/pages/unveil.blade.php
@@ -189,6 +189,11 @@
                         @endphp
                         <div class="carousel slide carousel-fade pb-lg-5 pb-0" id="historical-milestone-carousel">
                             <div class="d-lg-none">
+                                <button id="carousel-btn-prev" class="swiper-button swiper-button-prev-custom year-prev d-lg-none z-2"
+                                    data-bs-target="#historical-milestone-carousel" data-bs-slide-to="">
+                                    <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
+                                        title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
+                                </button>
                                 <div class="carousel-indicators justify-content-between">
                                     <div class="swiper swiper-year w-100 h-fit overflow-visible" id="swiper-year">
                                         <div class="swiper-wrapper">
@@ -210,6 +215,11 @@
                                         </div>
                                     </div>
                                 </div>
+                                <button id="carousel-btn-next" class="swiper-button swiper-button-next-custom year-next d-lg-none z-2"
+                                    data-bs-target="#historical-milestone-carousel" data-bs-slide-to="">
+                                    <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
+                                        title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
+                                </button>
                             </div>
                             <div class="d-none d-lg-block">
                                 <div class="carousel-container justify-content-between">
@@ -244,48 +254,48 @@
                                 </div>
                             </div>
                             <div class="carousel-inner pb-lg-5 overflow-visible pb-4">
-                                @foreach ($historicalMilestoneModels as $historicalMilestoneModel)
-                                    <div @class(['carousel-item bg-body', 'active' => $loop->first])>
-                                        {{-- We needed to include this picture twice because bootstrap took the picture height in its calculation for the carousel height --}}
-                                        @if ($historicalMilestoneModel->picture)
-                                            <img class="position-absolute picture d-none d-lg-block"
-                                                src="{{ $historicalMilestoneModel->picture }}"
-                                                title="{{ $historicalMilestoneModel->picture_title }}"
-                                                alt="{{ $historicalMilestoneModel->picture_alt }}">
-                                        @endif
-                                        <div class="row justify-content-center justify-content-lg-end">
-                                            <div class="col-12 col-lg-6">
-                                                <p class="year fw-bold text-{{ $colors[$loop->index % 4] }} pb-lg-0 mb-5 pb-5 text-center">
-                                                    {{ $historicalMilestoneModel->year }}
-                                                </p>
-                                            </div>
+                                    @foreach ($historicalMilestoneModels as $historicalMilestoneModel)
+                                        <div @class(['carousel-item bg-body', 'active' => $loop->first])>
+                                            {{-- We needed to include this picture twice because bootstrap took the picture height in its calculation for the carousel height --}}
                                             @if ($historicalMilestoneModel->picture)
-                                                <img class="position-relative picture d-lg-none" src="{{ $historicalMilestoneModel->picture }}"
+                                                <img class="position-absolute picture d-none d-lg-block"
+                                                    src="{{ $historicalMilestoneModel->picture }}"
                                                     title="{{ $historicalMilestoneModel->picture_title }}"
                                                     alt="{{ $historicalMilestoneModel->picture_alt }}">
                                             @endif
-                                            <div class="col-12 col-lg-3 text-lg-start d-flex flex-column justify-content-end">
-                                                <div class="slide-content mx-lg-0 p-lg-0 mx-auto w-fit rounded p-3">
-                                                    <p class="fw-bold fs-5">
-                                                        {{ $historicalMilestoneModel->title }}
+                                            <div class="row justify-content-center justify-content-lg-end">
+                                                <div class="col-12 col-lg-6">
+                                                    <p class="year fw-bold text-{{ $colors[$loop->index % 4] }} pb-lg-0 mb-5 pb-5 text-center">
+                                                        {{ $historicalMilestoneModel->year }}
                                                     </p>
-                                                    @if ($historicalMilestoneModel->text)
-                                                        <p>
-                                                            {{ $historicalMilestoneModel->text }}
+                                                </div>
+                                                @if ($historicalMilestoneModel->picture)
+                                                    <img class="position-relative picture d-lg-none" src="{{ $historicalMilestoneModel->picture }}"
+                                                        title="{{ $historicalMilestoneModel->picture_title }}"
+                                                        alt="{{ $historicalMilestoneModel->picture_alt }}">
+                                                @endif
+                                                <div class="col-12 col-lg-3 text-lg-start d-flex flex-column justify-content-end">
+                                                    <div class="slide-content mx-lg-0 p-lg-0 mx-auto w-fit rounded p-3">
+                                                        <p class="fw-bold fs-5">
+                                                            {{ $historicalMilestoneModel->title }}
                                                         </p>
+                                                        @if ($historicalMilestoneModel->text)
+                                                            <p>
+                                                                {{ $historicalMilestoneModel->text }}
+                                                            </p>
+                                                        @endif
+                                                    </div>
+                                                    @if ($historicalMilestoneModel->button_status)
+                                                        <a class="btn btn-{{ $colors[$loop->index % 4] }} rounded-5 mt-3 text-inherit text-white"
+                                                            href="{{ $historicalMilestoneModel->button_url }}"
+                                                            @if ($historicalMilestoneModel->button_new_tab) target="_blank" @endif>
+                                                            {{ $historicalMilestoneModel->button_label }}
+                                                        </a>
                                                     @endif
                                                 </div>
-                                                @if ($historicalMilestoneModel->button_status)
-                                                    <a class="btn btn-{{ $colors[$loop->index % 4] }} rounded-5 mt-3 text-inherit text-white"
-                                                        href="{{ $historicalMilestoneModel->button_url }}"
-                                                        @if ($historicalMilestoneModel->button_new_tab) target="_blank" @endif>
-                                                        {{ $historicalMilestoneModel->button_label }}
-                                                    </a>
-                                                @endif
                                             </div>
                                         </div>
-                                    </div>
-                                @endforeach
+                                    @endforeach
                             </div>
                         </div>
                     </div>

From ef44546aea1c7bde9434fe04a6d51f4214d08ab4 Mon Sep 17 00:00:00 2001
From: Corentin Huet <corentin.huet@ldc.fr>
Date: Fri, 27 Mar 2026 14:22:54 +0100
Subject: [PATCH 2/3] fix: :bug: correct publish validation, fix translation,
 and add slider indicators

---
 app/Models/Aisle.php                             | 4 +++-
 app/Models/Brand.php                             | 6 ++++--
 app/Models/Network.php                           | 4 +++-
 resources/lang/fr/validation.php                 | 3 ++-
 resources/views/bo/pages/brands/form.blade.php   | 6 +++---
 resources/views/fo/pages/networks/show.blade.php | 3 +++
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/Models/Aisle.php b/app/Models/Aisle.php
index 17d0287..46b7b35 100644
--- a/app/Models/Aisle.php
+++ b/app/Models/Aisle.php
@@ -94,9 +94,11 @@ class Aisle extends Model
     private static function assertLimitPublishedModels(self $model, bool $isDeletion = false)
     {
         $count = self::query()->where('published', true)->where('network_id', $model->network_id)->count();
+        $updatePublished = !$isDeletion && $model->published && !$model->getOriginal('published');
+
         if (
             (!$model->published && $count <= 1) ||
-            ($model->published && $count >= 4) ||
+            ($updatePublished && $count >= 4) ||
             ($isDeletion && $count === 1)
         ) {
             throw ValidationException::withMessages([
diff --git a/app/Models/Brand.php b/app/Models/Brand.php
index 90baf1a..d583ef0 100644
--- a/app/Models/Brand.php
+++ b/app/Models/Brand.php
@@ -89,11 +89,13 @@ class Brand extends Model
      */
     private static function assertLimitPublishedModels(self $model, bool $isDeletion = false)
     {
-        $count = self::query()->where('published', true)->count();
+        $count = self::query()->where('published', true)->where('aisle_id', $model->aisle_id)->count();
+        $updatePublished = !$isDeletion && $model->published && !$model->getOriginal('published');
+
         if (
             $count !== 0 &&
             ((!$model->published && $count <= 1) ||
-            ($model->published && $count >= 5) ||
+            ($updatePublished && $count >= 5) ||
             ($isDeletion && $count === 1))
         ) {
             throw ValidationException::withMessages([
diff --git a/app/Models/Network.php b/app/Models/Network.php
index e4d9397..0d1535f 100644
--- a/app/Models/Network.php
+++ b/app/Models/Network.php
@@ -138,9 +138,11 @@ class Network extends Model
     private static function assertLimitPublishedModels(self $model, bool $isDeletion = false)
     {
         $count = self::query()->where('published', true)->count();
+        $updatePublished = !$isDeletion && $model->published && !$model->getOriginal('published');
+
         if (
             (!$model->published && $count <= 1) ||
-            ($model->published && $count >= 5) ||
+            ($updatePublished && $count >= 5) ||
             ($isDeletion && $count === 1)
         ) {
             throw ValidationException::withMessages([
diff --git a/resources/lang/fr/validation.php b/resources/lang/fr/validation.php
index dfb5e68..962a5a5 100644
--- a/resources/lang/fr/validation.php
+++ b/resources/lang/fr/validation.php
@@ -303,6 +303,7 @@ return [
             'link'  => 'lien de l\'ancre',
         ],
         'media'                    => 'média',
-        'anchor'                   => 'ancre'
+        'anchor'                   => 'ancre',
+        'link'                     => 'lien',
     ],
 ];
diff --git a/resources/views/bo/pages/brands/form.blade.php b/resources/views/bo/pages/brands/form.blade.php
index ed73c4c..fe868ed 100644
--- a/resources/views/bo/pages/brands/form.blade.php
+++ b/resources/views/bo/pages/brands/form.blade.php
@@ -34,13 +34,13 @@
     {{-- LINK --}}
     <div class="col-12 col-md-6 mb-3">
         <fieldset class="h-100 border p-3">
-            <legend>{{ Str::ucfirst(__('validation.attributes.link')) }}</legend>
+            <legend>{{ Str::ucfirst(__('validation.custom.link')) }}</legend>
             <div class="row">
                 <div class="col-12">
                     @include('bo.partials.inputs.varchar', [
                         'id' => 'brandLink',
                         'label' => __(':field :inter:model', [
-                            'field' => Str::ucfirst(__('validation.attributes.link')),
+                            'field' => Str::ucfirst(__('validation.custom.link')),
                             'inter' => __('validation.custom.of_the.female'),
                             'model' => trans_choice('models.classes.brand', 1),
                         ]),
@@ -50,7 +50,7 @@
                         'model' => $brandModel ?? null,
                         'helper' => __('validation.between.string', [
                             'attribute' => __(':field :inter:model', [
-                                'field' => __('validation.attributes.link'),
+                                'field' => __('validation.custom.link'),
                                 'inter' => __('validation.custom.of_the.female'),
                                 'model' => trans_choice('models.classes.brand', 1),
                             ]),
diff --git a/resources/views/fo/pages/networks/show.blade.php b/resources/views/fo/pages/networks/show.blade.php
index 35cd42a..3a3bc1d 100644
--- a/resources/views/fo/pages/networks/show.blade.php
+++ b/resources/views/fo/pages/networks/show.blade.php
@@ -102,6 +102,9 @@
                                         </div>
                                     @endforeach
                                 </div>
+                                <div
+                                    class="position-relative swiper-pagination swiper-networks-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal d-flex justify-content-center align-items-center mt-5 flex-nowrap px-5">
+                                </div>
                             </div>
                             <button class="swiper-button swiper-button-prev-custom swiper-networks-button-prev z-1 mx-3">
                                 <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"

From 3a4ec137987c91462d6939c3815845bca0c719a1 Mon Sep 17 00:00:00 2001
From: Corentin Huet <corentin.huet@ldc.fr>
Date: Mon, 30 Mar 2026 09:49:40 +0200
Subject: [PATCH 3/3] fix: :bug: add missing arrows to the slider, add
 component for ordering carousels

---
 .../Controllers/Bo/CarouselController.php     |  5 ++
 .../Controllers/Fo/StaticPageController.php   |  2 +-
 app/Models/Carousel.php                       | 24 ++-----
 app/Providers/RouteServiceProvider.php        |  2 +
 resources/ts/fo/base/common.ts                | 36 -----------
 resources/ts/fo/fo.ts                         |  1 +
 resources/ts/fo/pages/hire.ts                 | 63 +++++++++++++++++++
 .../change-model-order-select.blade.php       |  2 +-
 .../bo/pages/carousels/index-list.blade.php   | 27 +++++++-
 .../views/fo/partials/hire/carousel.blade.php | 10 ++-
 routes/web-bo.php                             |  4 ++
 11 files changed, 116 insertions(+), 60 deletions(-)
 create mode 100644 resources/ts/fo/pages/hire.ts

diff --git a/app/Http/Controllers/Bo/CarouselController.php b/app/Http/Controllers/Bo/CarouselController.php
index 90c8d98..0eeb469 100644
--- a/app/Http/Controllers/Bo/CarouselController.php
+++ b/app/Http/Controllers/Bo/CarouselController.php
@@ -8,6 +8,8 @@ use App\Http\Requests\Bo\Carousels\UpdateCarouselRequest;
 use App\Lib\Helpers\FileStorageHelper;
 use App\Models\Carousel;
 use App\Models\Section;
+use App\Traits\Controllers\UpdateModelOrder;
+use App\Traits\Controllers\UpdateModelPublished;
 use Illuminate\Http\Request;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\DB;
@@ -15,6 +17,9 @@ use Illuminate\Support\Str;
 
 class CarouselController extends Controller
 {
+    use UpdateModelOrder;
+    use UpdateModelPublished;
+
     /**
      * Create the controller instance.
      */
diff --git a/app/Http/Controllers/Fo/StaticPageController.php b/app/Http/Controllers/Fo/StaticPageController.php
index 07bcc21..fd496bf 100644
--- a/app/Http/Controllers/Fo/StaticPageController.php
+++ b/app/Http/Controllers/Fo/StaticPageController.php
@@ -278,7 +278,7 @@ class StaticPageController extends Controller
         $testimonialSection    = $sectionModels->where('section', PageSectionEnum::hire_grow)->first();
         $paritySection         = $sectionModels->where('section', PageSectionEnum::hire_parity)->first();
         $findSection           = $sectionModels->where('section', PageSectionEnum::hire_find)->first();
-        $carouselSectionParity = Carousel::query()->where('section_id', PageSectionEnum::hire_parity)->where('published', true)->get();
+        $carouselSectionParity = Carousel::query()->where('section_id', PageSectionEnum::hire_parity)->where('published', true)->orderBy('order')->get();
         $navLinks              = Sticky::query()->where('type', StaticPageType::we_hire)->get();
 
         return view('fo.pages.hire', \compact(
diff --git a/app/Models/Carousel.php b/app/Models/Carousel.php
index 7f91e08..28decd4 100644
--- a/app/Models/Carousel.php
+++ b/app/Models/Carousel.php
@@ -5,6 +5,7 @@ namespace App\Models;
 use App\Lib\Helpers\FileStorageHelper;
 use App\Lib\Helpers\ToolboxHelper;
 use App\Traits\Models\ActivityLog;
+use App\Traits\Models\Orderable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 
@@ -21,6 +22,7 @@ class Carousel extends Model
 {
     use ActivityLog;
     use HasFactory;
+    use Orderable;
 
     /**
      * The attributes that are mass assignable.
@@ -78,28 +80,14 @@ class Carousel extends Model
 
     // * METHODS
 
-
     /**
-     * Set order after the last element of the list.
+     * Group ordering by section_id.
      *
-     * @param self    $model
-     * @param boolean $isDeletion
-     * @return void
+     * @return string
      */
-    private static function setOrder(self $model, bool $isDeletion = false): void
+    public function getOrderGroupField(): string
     {
-        $maxOrder = \intval(self::query()->where('section_id', $model->section_id)->max('order'));
-
-        if ($isDeletion) {
-            $request = Carousel::query()
-                ->where('section_id', $model->section_id)
-                ->whereNot('id', $model->id)
-                ->whereBetween('order', [$model->order, $maxOrder]);
-            $request->decrement('order', 1);
-            return;
-        }
-
-        $model->order = $maxOrder + 1;
+        return 'section_id';
     }
 
 
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
index 4cfd0e0..0c133f4 100644
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@@ -5,6 +5,7 @@ namespace App\Providers;
 use App\Http\Middleware\VerifyCsrfToken;
 use App\Models\Aisle;
 use App\Models\Brand;
+use App\Models\Carousel;
 use App\Models\Network;
 use App\Models\News;
 use App\Models\Strip;
@@ -53,6 +54,7 @@ class RouteServiceProvider extends ServiceProvider
         Route::model('network', Network::class);
         Route::model('aisle', Aisle::class);
         Route::model('brand', Brand::class);
+        Route::model('carousel', Carousel::class);
         Route::bind('publishedNews', function ($value) {
             return News::where(function ($q) use ($value) {
                 $q->where('slug', $value);
diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts
index 3a07c40..1e2a948 100644
--- a/resources/ts/fo/base/common.ts
+++ b/resources/ts/fo/base/common.ts
@@ -346,42 +346,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 },
             },
         },
-        "swiper-carousels": {
-            modules: [Pagination],
-            grabCursor: true,
-            slidesPerView: 1,
-            spaceBetween: 15,
-            centeredSlides: true,
-            initialSlide: 0,
-            speed: 750,
-            pagination: {
-                el: ".swiper-carousels-pagination",
-                clickable: true,
-                renderBullet: function (index: number, className: string) {
-                    return "<button class=\"btn btn-tertiary rounded-0 border-0 w-100 mx-2 p-0 " + className + "\" title=\"Aller à la slide " + (index + 1) + "\"></button>";
-                },
-            },
-            breakpoints: {
-                576: {
-                    slidesPerView: 1.5,
-                },
-                768: {
-                    slidesPerView: 2,
-                },
-                992: {
-                    slidesPerView: 2.5,
-                },
-            },
-            on: {
-                beforeInit(swiper: Swiper) {
-                    const slideCount = swiper.el.querySelectorAll(".swiper-slide").length;
-
-                    if (slideCount !== 2) {
-                        swiper.params.initialSlide = Math.floor(slideCount / 2);
-                    }
-                }
-            }
-        },
     };
 
     const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf<HTMLElement>;
diff --git a/resources/ts/fo/fo.ts b/resources/ts/fo/fo.ts
index c1c5da6..4969d97 100644
--- a/resources/ts/fo/fo.ts
+++ b/resources/ts/fo/fo.ts
@@ -22,4 +22,5 @@ import "./base/sticky";
 // PAGES
 import "./pages/unveil";
 import "./pages/site";
+import "./pages/hire";
 
diff --git a/resources/ts/fo/pages/hire.ts b/resources/ts/fo/pages/hire.ts
new file mode 100644
index 0000000..1f39d0b
--- /dev/null
+++ b/resources/ts/fo/pages/hire.ts
@@ -0,0 +1,63 @@
+import Swiper from "swiper";
+import { Navigation, Pagination } from "swiper/modules";
+
+document.addEventListener("DOMContentLoaded", function () {
+    const hire = document.querySelector("section.we-hire");
+    if (hire === null) {
+        return;
+    }
+
+    const swiperContainers = document.querySelectorAll(".swiper-container");
+
+    swiperContainers.forEach((container, index) => {
+        const carousel = container.querySelector(".swiper-carousels") as HTMLElement,
+            btnPrev = container.querySelector(".carousel-prev") as HTMLElement,
+            btnNext = container.querySelector(".carousel-next") as HTMLElement,
+            pagination = carousel?.querySelector(".swiper-carousels-pagination") as HTMLElement;
+
+        carousel.classList.add(`swiper-${index}`);
+        pagination.classList.add(`swiper-pagination-${index}`);
+        btnPrev.classList.add(`prev-${index}`);
+        btnNext.classList.add(`next-${index}`);
+
+        new Swiper(carousel, {
+            modules: [Pagination, Navigation],
+            grabCursor: true,
+            slidesPerView: 1,
+            spaceBetween: 15,
+            centeredSlides: true,
+            initialSlide: 0,
+            speed: 750,
+            pagination: {
+                el: `.swiper-pagination-${index}`,
+                clickable: true,
+                renderBullet: function (idx, className) {
+                    return `<button class="btn btn-tertiary rounded-0 border-0 w-100 mx-2 p-0 ${className}" title="Aller à la slide ${idx + 1}"></button>`;
+                },
+            },
+            navigation: {
+                prevEl: `.prev-${index}`,
+                nextEl: `.next-${index}`,
+            },
+            on: {
+                beforeInit(swiper: Swiper) {
+                    const slideCount = swiper.el.querySelectorAll(".swiper-slide").length;
+                    if (slideCount !== 2) {
+                        swiper.params.initialSlide = Math.floor(slideCount / 2);
+                    }
+                },
+            },
+            breakpoints: {
+                576: {
+                    slidesPerView: 1.5
+                },
+                768: {
+                    slidesPerView: 2
+                },
+                992: {
+                    slidesPerView: 2.5
+                },
+            },
+        });
+    });
+});
diff --git a/resources/views/bo/modules/change-model-order-select.blade.php b/resources/views/bo/modules/change-model-order-select.blade.php
index 313e09c..ffb643f 100644
--- a/resources/views/bo/modules/change-model-order-select.blade.php
+++ b/resources/views/bo/modules/change-model-order-select.blade.php
@@ -12,7 +12,7 @@
                     @method('PATCH')
                     <div class="mb-3">
                         <label for="order-{{ $model->getKey() }}" class="form-label">{{ __('Nouvel ordre') }}</label>
-                        <input type="number" class="form-input" id="order-{{ $model->id }}" placeholder="1" name="order" min="1">
+                        <input type="number" class="form-input" id="order-{{ $model->getKey() }}" placeholder="1" name="order" min="1">
                     </div>
                     <button type="submit" class="btn btn-primary">{{ _('Sauvegarder') }}</button>
                 </form>
diff --git a/resources/views/bo/pages/carousels/index-list.blade.php b/resources/views/bo/pages/carousels/index-list.blade.php
index f53cd83..712575a 100644
--- a/resources/views/bo/pages/carousels/index-list.blade.php
+++ b/resources/views/bo/pages/carousels/index-list.blade.php
@@ -1,18 +1,39 @@
 <table class="table-hover table-fix-action m-0 table">
     @if (count($carouselModels) > 0)
         <thead>
-            @include('bo.modules.table-col-sorter', [
-                'cols' => [
+            @php
+                $cols = [];
+
+                if (request()->section) {
+                    $cols = array_merge($cols, [
+                        'order' => Str::ucfirst(__('validation.custom.order')),
+                    ]);
+                }
+
+                $cols = array_merge($cols, [
                     'title' => Str::ucfirst(__('validation.attributes.title')),
                     'section_id' => Str::ucfirst(trans_choice('models.classes.section', 1)),
                     'published' => Str::ucfirst(__('validation.custom.activated')),
                     'updated_at' => Str::ucfirst(__('validation.attributes.updated_at')),
-                ],
+                ]);
+            @endphp
+
+            @include('bo.modules.table-col-sorter', [
+                $cols
             ])
         </thead>
         <tbody>
             @foreach ($carouselModels as $carouselModel)
                 <tr class="border-bottom">
+                    @php
+                        $routeName = request()->route()->getName();
+                    @endphp
+                    @if (request()->section && empty(request()->search) && Session::get("$routeName.sort_col") === 'order')
+                        @include('bo.modules.change-model-order-select', [
+                            'routeName' => 'carousels',
+                            'model'     => $carouselModel,
+                        ])
+                    @endif
                     <td class="text-center align-middle">{{ $carouselModel->title }}</td>
                     <td class="text-center">
                         <a class="btn btn-sm btn-primary" class="text-center align-middle"
diff --git a/resources/views/fo/partials/hire/carousel.blade.php b/resources/views/fo/partials/hire/carousel.blade.php
index 985f420..77acef6 100644
--- a/resources/views/fo/partials/hire/carousel.blade.php
+++ b/resources/views/fo/partials/hire/carousel.blade.php
@@ -1,6 +1,10 @@
 @if (!empty($carousel))
     <div class="row">
-        <div class="col-12 position-relative mb-5">
+        <div class="col-12 position-relative swiper-container mb-5">
+            <button class="swiper-button swiper-button-prev-custom carousel-prev z-2">
+                <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
+                    title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
+            </button>
             <div class="swiper swiper-carousels mt-lg-0 mt-5 overflow-visible" id="swiper-carousels">
                 <div class="swiper-wrapper h-fit">
                     @foreach ($carousel->media as $medias)
@@ -18,6 +22,10 @@
                     class="position-relative swiper-pagination swiper-carousels-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal d-flex justify-content-center align-items-center mt-5 flex-nowrap px-5">
                 </div>
             </div>
+            <button class="swiper-button swiper-button-next-custom carousel-next z-2">
+                <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
+                    title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
+            </button>
         </div>
     </div>
 @endif
diff --git a/routes/web-bo.php b/routes/web-bo.php
index 9604b7d..b616fea 100644
--- a/routes/web-bo.php
+++ b/routes/web-bo.php
@@ -210,6 +210,10 @@ Route::middleware(['admin-secure'])->prefix('bo')
                 CarouselController::class,
                 'changePublished'
             ])->name('carousels.change-published');
+            Route::patch('/carousels/{carousel}/change-order', [
+                CarouselController::class,
+                'changeCustomOrder'
+            ])->name('carousels.change-order');
 
             // * BRANDS
             Route::resource('brands', BrandController::class)->except('show')