Moving out of owl carousel and going for a custom scrollbar mechanism

src/renderer/layouts/HomePage.vue

@@ -333,11 +333,6 @@ section.page
       font-size: 1.5rem
       font-weight: 200
       margin-left: 1rem
-  .carousel-custom
-      &.half
-        width: 0rem
-      .owl-stage-outer
-        overflow: unset
 
 @media(max-width: 1000px)
   .middle-row

src/renderer/layouts/MusicRow.vue

@@ -1,20 +1,27 @@
 <template>
     <section class="music-row">
         <legend>{{title}}</legend>
-        <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
+        <section class="items">
-           <MusicBox v-for="item in items" :key="item.id" :item="item" />
+          <MusicBox v-for="item in items" :key="item.id" :item="item" />
-        </carousel>
+        </section>
     </section>
 </template>
 
 <script>
 import MusicBox from '../components/MusicBox'
 import carousel from 'vue-owl-carousel'
+import Scrollbar from 'smooth-scrollbar'
+import HorizontalScrollPlugin from '../utility/HorizontalScrollPlugin'
+Scrollbar.use(HorizontalScrollPlugin)
 
 export default {
   name: 'MusicRow',
   props: ['items', 'title'],
-  components: { MusicBox, carousel }
+  components: { MusicBox, carousel },
+  mounted () {
+    let container = this.$el.getElementsByClassName('items')[0]
+    Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true, horizontal: true })
+  }
 }
 </script>
 
@@ -26,7 +33,8 @@ section.music-row
         font-family: 'Roboto Slab', serif        
         margin: 20px 0px
         white-space: nowrap
-    .carousel-custom
+    .items
-      .owl-stage-outer
+      overflow: visible !important
-        overflow: unset
+    .scroll-content
+        display: flex
 </style>

src/renderer/utility/HorizontalScrollPlugin.js

@@ -7,6 +7,9 @@ export default class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {
         return delta
       }
       // @see: https://github.com/idiotWu/smooth-scrollbar/issues/181
+      if (!this.scrollbar.options.horizontal) {
+        return
+      }
       const { x, y } = delta
       return {
         y: 0,