Initial idea for sliders

front/src/components/Home.vue

@@ -178,6 +178,7 @@
         <translate translate-context="*/*/*">New channels</translate>
       </h3>
       <channels-widget :show-modification-date="true" :limit="10" :filters="{ordering: '-creation_date', external: 'false'}"></channels-widget>
+      <album-slider :filters="{playable: true, ordering: '-creation_date'}" :limit="10"></album-slider>
 
     </section>
   </main>
@@ -189,6 +190,7 @@ import _ from '@/lodash'
 import {mapState} from 'vuex'
 import showdown from 'showdown'
 import AlbumWidget from "@/components/audio/album/Widget"
+import AlbumSlider from "@/components/audio/album/Slider"
 import ChannelsWidget from "@/components/audio/ChannelsWidget"
 import LoginForm from "@/components/auth/LoginForm"
 import SignupForm from "@/components/auth/SignupForm"
@@ -200,6 +202,7 @@ export default {
     ChannelsWidget,
     LoginForm,
     SignupForm,
+    AlbumSlider,
   },
   data () {
     return {

front/src/components/audio/album/Slider.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="wrapper">
+    <div class="ui two column grid">
+      <div class="column">
+        <h3 v-if="!!this.$slots.title" class="ui header">
+          <slot name="title"></slot>
+        </h3>
+        <slot></slot>
+      </div>
+      <div class="column">
+        <button :class="['right', 'floated', 'circular', 'icon', 'ui', {'disabled': !nextPage}, 'button',]" @click.prevent="fetchData(nextPage)">
+          <i class="right arrow icon"></i>
+        </button>
+        <button :class="['right', 'floated', 'circular', 'icon', 'ui', {'disabled': !previousPage}, 'button',]" @click.prevent="fetchData(previousPage)">
+          <i class="left arrow icon"></i>
+        </button>
+      </div>
+    </div>
+    <div class="ui hidden divider"></div>
+    <div class="ui app-cards cards">
+      <div v-if="isLoading" class="ui inverted active dimmer">
+        <div class="ui loader"></div>
+      </div>
+      <album-card v-for="album in albums" :album="album" :key="album.id" />
+    </div>
+    <template v-if="!isLoading && albums.length === 0">
+      <empty-state @refresh="fetchData('albums/')" :refresh="true"></empty-state>
+    </template>
+  </div>
+</template>
+
+<script>
+
+import axios from 'axios'
+import AlbumCard from '@/components/audio/album/Card'
+import $ from 'jquery'
+
+export default {
+  components: {
+    AlbumCard,
+  },
+  props: {
+    limit: {type: Number, default: 4},
+    filters: {type: Object, required: true},
+  },
+  data() {
+    return {
+      albums: [],
+      count: 0,
+      isLoading: false,
+      errors: null,
+      previousPage: null,
+      nextPage: null,
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData (url) {
+      url = url || 'albums/'
+      this.isLoading = true
+      let self = this
+      let params = {q: this.query, ...this.filters}
+      params.page_size = this.limit
+      params.offset = this.offset
+      axios.get(url, {params: params}).then((response) => {
+        self.previousPage = response.data.previous
+        self.nextPage = response.data.next
+        self.isLoading = false
+        self.albums = [...response.data.results]
+        self.count = response.data.count
+      }, error => {
+        self.isLoading = false
+        self.errors = error.backendErrors
+      })
+    },
+  },
+  mounted() {
+    $('.component-album-card')
+      .transition('scale')
+  }
+}
+</script>

front/src/components/library/Home.vue

@@ -19,21 +19,15 @@
         </div>
       </div>
       <div class="ui section hidden divider"></div>
-      <div class="ui stackable one column grid">
-        <div class="column">
-          <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
+      <album-slider :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
         <template slot="title"><translate translate-context="Content/Home/Title">Recently added</translate></template>
-          </album-widget>
-        </div>
-      </div>
+      </album-slider>
       <template v-if="scope === 'all'">
         <h3 class="ui header" >
           <translate translate-context="*/*/*">New channels</translate>
         </h3>
         <channels-widget :show-modification-date="true" :limit="12" :filters="{ordering: '-creation_date', external: 'false'}"></channels-widget>
       </template>
-
-
     </section>
   </main>
 </template>
@@ -46,6 +40,7 @@ import ChannelsWidget from "@/components/audio/ChannelsWidget"
 import ArtistCard from "@/components/audio/artist/Card"
 import TrackWidget from "@/components/audio/track/Widget"
 import AlbumWidget from "@/components/audio/album/Widget"
+import AlbumSlider from "@/components/audio/album/Slider"
 import PlaylistWidget from "@/components/playlists/Widget"
 
 const ARTISTS_URL = "artists/"
@@ -62,6 +57,7 @@ export default {
     AlbumWidget,
     PlaylistWidget,
     ChannelsWidget,
+    AlbumSlider,
   },
   data() {
     return {