Bootstrap 5.2 Carousel large stop

This script Help stopping Caroussel on window resizing

by TheBuzzer

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap - Carousel test for Large Stop</title>
	  
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

  </head>
  <body>
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators d-md-none">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="col-md-4 carousel-item active" id="FirstBox" data-bs-interval="10000">
      <text class="d-block w-100" x="50%" y="50%" fill="#aaa" dy=".3em">First slide</text>
      <div class="carousel-caption d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="col-md-4 carousel-item"...

CSS

.carousel-item {
  width: 33%;
  text-align: center;
  margin-bottom: 30px;
  float: left;
}

.carousel-inner > .carousel-item > text {
    margin: auto;
    float: left;
}

.carousel-caption {
  margin-top: 10px;
}


@media (max-width:767px) {
  .carousel-item {
    width: 100%;
  }
}

JavaScript

$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() < 768) {
            $('#FirstBox').removeClass('active');
            $('#SecondBox').addClass('active');
            $('#ThirdBox').removeClass('active');
            $('#carouselExampleDark').attr({
                'data-bs-ride': 'carousel',
                'data-bs-pause': 'hover',
                'data-bs-interval': 3000                    
            }).carousel('cycle');
        }
        
        if ($(window).width() >= 768) {
            $('#FirstBox').addClass('active');
            $('#SecondBox').addClass('active');
            $('#ThirdBox').addClass('active');
            $('#carouselExampleDark').attr({
                'data-bs-interval': false,
                'data-bs-ride': false,
                'data-bs-pause': true
            }).carousel('pause');
        }
        $('#WindowWidth').text($(window).width());
    });
    $(window).trigger('resize');
});