slider bootstrap

src/app/mixins/mixin/location.ts

@@ -8,7 +8,8 @@ export class Location extends Vue {
   @State('mixins') private location!: LocationState;
   @Action('locationData', {namespace: 'mixins'}) private locationData: any;
   @Getter('list', {namespace: 'mixins'}) private list: any;
-
+  @Getter('sliderList', {namespace: 'mixins'}) private sliderList: any;
+
   private created() {
     this.locationData();
   }

src/app/mixins/vuex/getters.ts

@@ -8,4 +8,19 @@ export const getters: GetterTree<LocationState, RootState> = {
       return { name: l.name, capital: l.capital, population: l.population, region: l.region };
     });
   },
+  sliderList(state): any {
+    return state && state.list.map((l: any) => {
+      return {
+        name: l.name,
+        flag: l.flag,
+        info: {
+          capital: l.capital,
+          population: l.population,
+          region: l.region,
+          languages: l.languages.map((l: any) => l.name).join(', '),
+          nativeName: l.nativeName,
+        },
+      };
+    });
+  }
 };

src/app/sample/components/SampleComponent.vue

@@ -8,6 +8,24 @@
       </p>
       <b-button href="/user-login" variant="primary">Second Module</b-button>
     </b-card>
+    <b-card tag="article" style="max-width: 100%" class="mb-2">
+      <b-carousel id="carousel1"
+        background="#ababab"
+        :interval="0"
+        v-model="slide"
+        controls
+        @sliding-start="onSlideStart"
+        @sliding-end="onSlideEnd"
+      >
+        <b-carousel-slide v-for="country in sliderList"
+          :key="country.name"
+          :caption="country.name"
+          img-blank :img-alt="country.name"
+        >
+          <b-table stacked :items="[country.info]"></b-table>
+        </b-carousel-slide>
+      </b-carousel>
+    </b-card>
     <b-card tag="article" style="max-width: 100%" class="mb-2">
       <b-table stacked :items="list" caption-top>
         <template slot="table-caption">
@@ -32,8 +50,25 @@
     @State('sample') private sample!: SampleState;
     @Getter('message', {namespace}) private message!: string;
 
+    private data() {
+      return {
+        slide: 0,
+      };
+    }
     private mounted() {
       this.sampleData();
     }
+    onSlideStart (slide: any) {
+      console.log('Slide Start: '+slide);
+    }
+    onSlideEnd (slide: any) {
+      console.log('Slide End: '+slide);
+    }
   }
 </script>
+
+<style lang="scss">
+  caption {
+    text-align: center !important;
+  }
+</style>