Thiết kế website giá rẻ

Question

i am new to laravel and i want to have a carousel of product images on the homepage. carousel.blade.php is imported into index.blade.php, i have the carousel controller, model, etc.
my problem is that the code that i have for the carousel displays 4 images on page (which is what i want), but slides all 4 of them. i want the carousel to slide only 1 image at a time.
here is my carousel.blade.php code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Carousel</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .carousel-item {
            display: none;
            transition: transform 0.6s ease;
        }

        .carousel-item.active {
            display: flex;
        }

        .carousel-item .col-md-3 {
            flex: 1;
            position: relative;
            text-align: center;
        }

        .carousel-caption {
            position: static;
            background-color: rgba(114, 114, 114, 0.5);
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
        }

        .car-image {
            width: 100%;
            height: 200px; /* Set a fixed height */
            object-fit: cover; /* Maintain aspect ratio and cover the area */
        }

        .booking-btn {
            margin-top: 10px;
        }

        .btn--base {
            background-color: #fec700;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
        }

        .btn--base:hover {
            background-color: #fec200;
            color: white;
        }
    </style>
</head>
<body>

<!-- Carousel -->
<div id="photoCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
    <div class="carousel-inner">
        @foreach($cars as $index => $item)
        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
            <div class="row">
                @for($i = $index; $i < $index + 4 && $i < count($cars); $i++)
                <div class="col-md-3">
                    <img class="d-block img-fluid car-image" src="{{ get_image($cars[$i]->image ?? '','site-section') ?? '' }}">
                    <div class="carousel-caption d-none d-md-block">
                        <h4>{{ $cars[$i]->car_model ?? "" }}</h4>
                        <p>{{ $cars[$i]->price_standard ?? "" }} EUR {{ __("Per Day") }}</p>
                        <div class="booking-btn">
                            <a href="{{ setRoute('frontend.car.booking.index',$cars[$i]->slug)}}" class="btn--base">{{ __("Book Now") }}</a>
                        </div>
                    </div>
                </div>
                @endfor
            </div>
        </div>
        @endforeach
    </div>
    <a class="carousel-control-prev" href="#photoCarousel" 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="#photoCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!--Carousel -->

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Custom Script -->
@push("script")
<script>
    $(document).ready(function() {
        $('#photoCarousel').carousel({
            interval: 10000, // Set the interval to 2 seconds
            cycle: true // Ensure the carousel cycles continuously
        });

        $('#photoCarousel').on('slide.bs.carousel', function (e) {
            var $e = $(e.relatedTarget);
            var idx = $e.index();
            var itemsPerSlide = 1;
            var totalItems = $('.carousel-item').length;

            if (idx >= totalItems-(itemsPerSlide-1)) {
                var it = itemsPerSlide - (totalItems - idx);
                for (var i=0; i<it; i++) {
                    // append slides to end
                    if (e.direction=="left") {
                        $('.carousel-item').eq(i).appendTo('.carousel-inner');
                    }
                    else {
                        $('.carousel-item').eq(0).appendTo('.carousel-inner');
                    }
                }
            }
        });

        // Custom logic to slide one item at a time
        $('#photoCarousel').on('slid.bs.carousel', function () {
            var $activeItem = $('.carousel-item.active');
            var $nextItem = $activeItem.next('.carousel-item');

            if (!$nextItem.length) {
                $nextItem = $('.carousel-item').first();
            }

            $activeItem.removeClass('active');
            $nextItem.addClass('active');
        });
    });
</script>
@endpush

</body>
</html>

expected 1 image to slide every 10 seconds. all 4 images change after 10 seconds

Thiết kế website giá rẻ

Danh mục

carousel issue in laravel