How to change pagers width when window size changes?

by Vijay Pancholi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Pager Example</title>

</head>
<body>

<div id="bx-custom-pager">               
    <a data-slide-index="0" href=""><div class="bx-item" id="i1">1</div></a>
    <a data-slide-index="1" href=""><div class="bx-item" id="i2">2</div></a>
    <a data-slide-index="2" href=""><div class="bx-item" id="i3">3</div></a>
    <a data-slide-index="3" href=""><div class="bx-item" id="i4">4</div></a>
    <a data-slide-index="4" href=""><div class="bx-item" id="i5">5</div></a>
</div>

</body>
</html>

CSS

#bx-custom-pager {
  display: flex;
 
  background-color: #f0f0f0;
  
}

.bx-item {
  border:1px solid white;
  width: 100%;
  height: auto;
  background-color: #3498db;
  color: #fff;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  // Function to set the width of each pager item
  function detectWidth() {
    var windowWidth = $(window).width();
    var numItems = 5; // Number of pager items

    $('.bx-item').css('width', windowWidth / numItems + 'px');
  }

  // Initial call to set the width on document ready
  detectWidth();

  // Call the detectWidth function on window resize
  $(window).on('resize', function() {
    detectWidth();
  });
});