diff --git a/app/assets/javascripts/stat_slider.js b/app/assets/javascripts/stat_slider.js
index dfcce2932..48f274a82 100644
--- a/app/assets/javascripts/stat_slider.js
+++ b/app/assets/javascripts/stat_slider.js
@@ -1,20 +1,57 @@
-// jQuery Slider
-$(document).on('turbolinks:load', function() {
-  $('.institutional-repository-carousel .carousel-item').each(function(){
-    var itemToClone = $(this);
-
-    for (var i = 1; i < 6; i++) {
-      itemToClone = itemToClone.next();
-
-      // wrap around if at end of item collection
-      if (!itemToClone.length) {
-        itemToClone = $(this).siblings(':first');
-      }
-
-      // grab item, clone, add marker class, add to collection
-      itemToClone.children(':first-child').clone()
-        .addClass("cloneditem-"+(i))
-        .appendTo($(this));
+// Handles the infinite scrolling of the resource icons in the resource_type_slider
+
+let scrollPosition = 0;
+
+$(document).on('turbolinks:load', function initializeCarousel() {
+  const $resourceRow = $('.resource-row');
+  const $item = $resourceRow.children();
+  const resourceItemWidth = $('.resource-item').width() + 10; // 10px margin
+
+  // Clone first and last items for infinite scrolling
+  const $clonesBefore = $item.slice(-6).clone();
+  const $clonesAfter = $item.slice(0, 6).clone();
+
+  $resourceRow.prepend($clonesBefore).append($clonesAfter);
+
+  // Adjust the initial scroll position
+  scrollPosition = 6 * resourceItemWidth;
+  $resourceRow.css('transform', `translateX(-${scrollPosition}px)`);
+})
+
+function scrollResources(direction) {
+  const $resourceRow = $('.resource-row');
+  const totalItems = $resourceRow.children().length;
+  const resourceItemWidth = $('.resource-item').width() + 10; // 10px margin
+
+  if (direction === 'previous') {
+    scrollPosition -= resourceItemWidth;
+  } else if (direction === 'next') {
+    scrollPosition += resourceItemWidth;
+  }
+
+  $resourceRow.css({
+    transition: 'transform 0.3s ease',
+    transform: `translateX(-${scrollPosition}px)`
+  });
+
+  // Handle looping after the transition
+  $resourceRow.on('transitionend', function () {
+    if (scrollPosition < 6 * resourceItemWidth) {
+      // Reset to the original items at the end of the array
+      scrollPosition += (totalItems - 12) * resourceItemWidth;
+      $resourceRow.css({
+        transition: 'none',
+        transform: `translateX(-${scrollPosition}px)`
+      });
+    } else if (scrollPosition >= (totalItems - 6) * resourceItemWidth) {
+      // Reset to the original items at the beginning of the array
+      scrollPosition -= (totalItems - 12) * resourceItemWidth;
+      $resourceRow.css({
+        transition: 'none',
+        transform: `translateX(-${scrollPosition}px)`
+      });
     }
+    // Remove the transitionend listener after execution
+    $resourceRow.off('transitionend');
   });
-});
+}
diff --git a/app/assets/stylesheets/themes/institutional_repository.scss b/app/assets/stylesheets/themes/institutional_repository.scss
index 111a8446f..a15f4e867 100644
--- a/app/assets/stylesheets/themes/institutional_repository.scss
+++ b/app/assets/stylesheets/themes/institutional_repository.scss
@@ -1,6 +1,6 @@
 .institutional_repository {
 
-  ////// Basic Apperance Styles //////
+  ////// Basic Appearance Styles //////
 
   .mt-40 {
     margin-top: 40px;
@@ -163,30 +163,36 @@
     z-index: 5;
   }
 
-  .institutional-repository-carousel {
-    .carousel-control {
-      background-image: none;
-      width: 4%;
+  ///// Resources Carousel /////
 
-      .left {
-        margin-left: 0;
-      }
+  .institutional-repository-carousel {
+    .resource-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+    }
 
-      .right {
-        margin-right: 0;
-      }
+    .resource-wrapper {
+      overflow: hidden;
+      width: calc(6 * 160px); /* Requires the width of each resource-item including margins */
     }
 
-    .carousel-item.active {
+    .resource-row {
       display: flex;
-      padding-top: 1em;
-      padding-left: 10em;
-      padding-right: 10em;
+      transition: transform 0.3s ease;
+      width: max-content;
     }
-  }
 
-  .carousel .item .col-xs-12 {
-    padding: 0;
+    .resource-item {
+      margin: 30px 5px 0 5px;
+      width: 150px;
+      text-align: center;
+    }
+
+    .resource-item a {
+      text-decoration: none;
+    }
   }
 
   ////// All Collections //////
@@ -196,115 +202,6 @@
     font-size: 1.5em;
     list-style-type: none;
   }
+}
 
-  ////// Stats Carousel Media Queries //////
-
-  @media (max-width: 767px) {
-    .institutional-repository-carousel .cloneditem-1,
-    .institutional-repository-carousel .cloneditem-2,
-    .institutional-repository-carousel .cloneditem-3 {
-      display: none;
-    }
-  }
-
-  @media only screen and (max-width: 992px) {
-    .carousel .item .col-xs-12:nth-last-child(-n+2) {
-      display: none;
-    }
-  }
-
-  @media all and (min-width: 768px) {
-    .institutional-repository-carousel .carousel-inner > .active.left,
-    .institutional-repository-carousel .carousel-inner > .prev {
-      left: -50%;
-    }
-
-    .institutional-repository-carousel .carousel-inner > .active.right,
-    .institutional-repository-carousel .carousel-inner > .next {
-      left: 50%;
-    }
-
-    .institutional-repository-carousel .carousel-inner > .left,
-    .institutional-repository-carousel .carousel-inner > .prev.right,
-    .institutional-repository-carousel .carousel-inner > .active {
-      left: 0;
-    }
-
-    .institutional-repository-carousel .carousel-inner .cloneditem-1 {
-      display: block;
-    }
-  }
-
-  @media all and (min-width: 768px) and (transform-3d),
-  all and (min-width: 768px) and (-webkit-transform-3d) {
-    .institutional-repository-carousel .carousel-inner > .item.active.right,
-    .institutional-repository-carousel .carousel-inner > .item.next {
-      left: 0;
-      -webkit-transform: translate3d(50%, 0, 0);
-      transform: translate3d(50%, 0, 0);
-    }
-
-    .institutional-repository-carousel .carousel-inner > .item.active.left,
-    .institutional-repository-carousel .carousel-inner > .item.prev {
-      left: 0;
-      -webkit-transform: translate3d(-50%, 0, 0);
-      transform: translate3d(-50%, 0, 0);
-    }
-
-    .institutional-repository-carousel .carousel-inner > .item.left,
-    .institutional-repository-carousel .carousel-inner > .item.prev.right,
-    .institutional-repository-carousel .carousel-inner > .item.active {
-      left: 0;
-      -webkit-transform: translate3d(0, 0, 0);
-      transform: translate3d(0, 0, 0);
-    }
-  }
-
-  @media all and (min-width: 992px) {
-    .institutional-repository-carousel .carousel-inner > .active.left,
-    .institutional-repository-carousel .carousel-inner > .prev {
-      left: -16.6%;
-    }
-
-    .institutional-repository-carousel .carousel-inner > .active.right,
-    .institutional-repository-carousel .carousel-inner > .next {
-      left: 16.6%;
-    }
-
-    .institutional-repository-carousel .carousel-inner > .left,
-    .institutional-repository-carousel .carousel-inner > .prev.right,
-    .institutional-repository-carousel .carousel-inner > .active {
-      left: 0;
-    }
-
-    .institutional-repository-carousel .carousel-inner .cloneditem-2,
-    .institutional-repository-carousel .carousel-inner .cloneditem-3 {
-      display: block;
-    }
-  }
-
-  @media all and (min-width: 992px) and (transform-3d),
-  all and (min-width: 992px) and (-webkit-transform-3d) {
-    .institutional-repository-carousel .carousel-inner > .item.active.right,
-    .institutional-repository-carousel .carousel-inner > .item.next {
-      left: 0;
-      -webkit-transform: translate3d(16.6%, 0, 0);
-      transform: translate3d(16.6%, 0, 0);
-    }
-
-    .institutional-repository-carousel .carousel-inner > .item.active.left,
-    .institutional-repository-carousel .carousel-inner > .item.prev {
-      left: 0;
-      -webkit-transform: translate3d(-16.6%, 0, 0);
-      transform: translate3d(-16.6%, 0, 0);
-    }
 
-    .institutional-repository-carousel .carousel-inner > .item.left,
-    .institutional-repository-carousel .carousel-inner > .item.prev.right,
-    .institutional-repository-carousel .carousel-inner > .item.active {
-      left: 0;
-      -webkit-transform: translate3d(0, 0, 0);
-      transform: translate3d(0, 0, 0);
-    }
-  }
-}
diff --git a/app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb b/app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb
index 8f77b3fb3..b9569adb8 100644
--- a/app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb
+++ b/app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb
@@ -3,27 +3,31 @@
   <meta name="turbolinks-cache-control" content="no-cache">
 <% end %>
 
-<div class="carousel slide institutional-repository-carousel" id="carousel-tilenav" data-ride="carousel" data-interval="false">
-  <div class="carousel-inner">
-    <% resource_types.each.with_index do |(k,v), i| %>
-      <% next if v[0].zero? %>
-      <div class="carousel-item <%= 'active' if i == 1 %>">
-        <div class="col-sm-3 col-md-2 text-center">
-          <%= link_to "/catalog?f[resource_type_sim][]=#{k}", style: "color: inherit;" do %>
-            <i class='<%= "#{v[1]}" %>' aria-hidden="true"></i>
-            <h5><%= k %></h5>
-            <p><%= v[0] %></p>
-          <% end %>
-        </div>
+<div class="institutional-repository-carousel">
+  <div class="resource-container">
+    <a role="button" onclick="scrollResources('previous')">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <div class="resource-wrapper">
+      <div class="resource-row">
+        <% resource_types.each do |resource_type, value| %>
+          <% resource_count = value[0] %>
+          <% resource_icon = value[1] %>
+          <% next if resource_count.zero? %>
+          <div class="resource-item">
+            <%= link_to "/catalog?f[resource_type_sim][]=#{resource_type}", style: "color: inherit;" do %>
+              <i class='<%= "#{resource_icon}" %>' aria-hidden="true"></i>
+              <h6><%= resource_type %></h6>
+              <p><%= resource_count %></p>
+            <% end %>
+          </div>
+        <% end %>
       </div>
-    <% end %>
+    </div>
+    <a role="button" onclick="scrollResources('next')">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
   </div>
-  <a class="carousel-control-prev" href="#carousel-tilenav" 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="#carousel-tilenav" role="button" data-slide="next">
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="sr-only">Next</span>
-  </a>
 </div>