mchome/App.vue

## App.vue
<template>
  <div id="app">
    <swiper :images="images"></swiper>
  </div>
</template>

<script>
import swiper from "./components/vue-swiper";

export default {
  name: "App",
  components: {
    swiper
  },
  data() {
    return {
      images: [
        "https://images.unsplash.com/photo-1493134799591-2c9eed26201a?ixlib",
        "https://images.pexels.com/photos/290595/pexels-photo-290595.jpeg",
        "http://ak8.picdn.net/shutterstock/videos/15138448/thumb/4.jpg",
        "https://previews.123rf.com/images/gropgrop/gropgrop1510/gropgrop151000188/47475636-dubai-city-skyline-detailed-silhouette-hand-drawn-engraved-vector-illustration.jpg",
        "data:image/jpeg;base64,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"
      ]
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
}
</style>

## vue-swiper.vue
<template>
  <div class="swiper">
    <div class="btnLeft" @click="previewBtn"><</div>
    <div class="swiper-images"
      id="swiper-image"
      :style="{transform: 'translateX(-' + currentIndex*20 + 'rem)'}">
      <div class="swiper-image"
        v-for="image in imageList"
        :key="image.id"
        :style="{backgroundImage: 'url(' + image + ')'}">
      </div>
    </div>
    <div class="btnRight" @click="nextBtn">></div>
    <div class="indicator">
      <div @click="currentIndex = index" :class="{'indicator-item-selected': currentIndex === index}" class="indicator-item" v-for="(item, index) in images" :key="index"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "swiper",
  props: {
    images: Array,
    autoplay: {
      type: Boolean,
      default: () => true
    },
    duration: {
      type: Number,
      default: () => 3000
    }
  },
  data() {
    return {
      currentIndex: 0,
      interval: 0
    };
  },
  computed: {
    imageList: function() {
      const firstImage = this.images[0];
      const lastImage = this.images[this.images.length - 1];
      let images = this.images.slice();
      images.unshift(lastImage);
      images.push(firstImage);
      return images;
    }
  },
  methods: {
    previewBtn: function() {
      if (this.currentIndex === 0) this.currentIndex = this.images.length;
      this.currentIndex -= 1;
    },
    nextBtn: function() {
      if (this.currentIndex === this.images.length - 1) this.currentIndex = -1;
      this.currentIndex += 1;
    },
    setAutoPlay: function() {
      if (this.autoplay) {
        this.interval = setInterval(this.nextBtn, this.duration);
      }
    },
    stopAutoPlay: function() {
      if (this.autoplay) {
        clearInterval(this.interval);
      }
    }
  },
  mounted: function() {
    this.$nextTick(function() {
      document
        .getElementById("swiper-image")
        .addEventListener("mouseover", ev => this.stopAutoPlay());
      document
        .getElementById("swiper-image")
        .addEventListener("mouseout", ev => {
          this.stopAutoPlay();
          this.setAutoPlay();
        });
      this.setAutoPlay();
    });
  }
};
</script>

<style scoped>
.swiper {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  width: 30rem;
}
.btnLeft,
.btnRight {
  display: inline-flex;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.6);
  height: 2.5rem;
  width: 1.5rem;
  position: absolute;
  justify-content: center;
  align-items: center;
  cursor: default;
  user-select: none;
  backdrop-filter: blur(5px);
}
.btnRight {
  left: 28.5rem;
}

.swiper-images {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  z-index: 0;
  height: 15rem;
  width: 30rem;
  position: relative;
  left: -15rem;
  transition: transform 0.5s ease-in-out;
}
.swiper-image {
  min-width: 20rem;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}
.indicator {
  position: absolute;
  height: 1.5rem;
  width: 6rem;
  margin-left: 12.5rem;
  margin-top: 5.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
}
.indicator-item {
  height: 0.7rem;
  width: 0.7rem;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.indicator-item:hover {
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25),
    4px 6px 10px 0px rgba(0, 0, 0, 0.22);
}
.indicator-item-selected {
  background-color: orange;
}
</style>
	<template>
	<div id="app">
	<swiper :images="images"></swiper>
	</div>
	</template>

	<script>
	import swiper from "./components/vue-swiper";

	export default {
	name: "App",
	components: {
	swiper
	},
	data() {
	return {
	images: [
	"https://images.unsplash.com/photo-1493134799591-2c9eed26201a?ixlib",
	"https://images.pexels.com/photos/290595/pexels-photo-290595.jpeg",
	"http://ak8.picdn.net/shutterstock/videos/15138448/thumb/4.jpg",
	"https://previews.123rf.com/images/gropgrop/gropgrop1510/gropgrop151000188/47475636-dubai-city-skyline-detailed-silhouette-hand-drawn-engraved-vector-illustration.jpg",
	"data:image/jpeg;base64,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"
	]
	};
	}
	};
	</script>

	<style>
	#app {
	font-family: "Avenir", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
	body {
	margin: 0;
	}
	</style>
	<template>
	<div class="swiper">
	<div class="btnLeft" @click="previewBtn"><</div>
	<div class="swiper-images"
	id="swiper-image"
	:style="{transform: 'translateX(-' + currentIndex*20 + 'rem)'}">
	<div class="swiper-image"
	v-for="image in imageList"
	:key="image.id"
	:style="{backgroundImage: 'url(' + image + ')'}">
	</div>
	</div>
	<div class="btnRight" @click="nextBtn">></div>
	<div class="indicator">
	<div @click="currentIndex = index" :class="{'indicator-item-selected': currentIndex === index}" class="indicator-item" v-for="(item, index) in images" :key="index"></div>
	</div>
	</div>
	</template>

	<script>
	export default {
	name: "swiper",
	props: {
	images: Array,
	autoplay: {
	type: Boolean,
	default: () => true
	},
	duration: {
	type: Number,
	default: () => 3000
	}
	},
	data() {
	return {
	currentIndex: 0,
	interval: 0
	};
	},
	computed: {
	imageList: function() {
	const firstImage = this.images[0];
	const lastImage = this.images[this.images.length - 1];
	let images = this.images.slice();
	images.unshift(lastImage);
	images.push(firstImage);
	return images;
	}
	},
	methods: {
	previewBtn: function() {
	if (this.currentIndex === 0) this.currentIndex = this.images.length;
	this.currentIndex -= 1;
	},
	nextBtn: function() {
	if (this.currentIndex === this.images.length - 1) this.currentIndex = -1;
	this.currentIndex += 1;
	},
	setAutoPlay: function() {
	if (this.autoplay) {
	this.interval = setInterval(this.nextBtn, this.duration);
	}
	},
	stopAutoPlay: function() {
	if (this.autoplay) {
	clearInterval(this.interval);
	}
	}
	},
	mounted: function() {
	this.$nextTick(function() {
	document
	.getElementById("swiper-image")
	.addEventListener("mouseover", ev => this.stopAutoPlay());
	document
	.getElementById("swiper-image")
	.addEventListener("mouseout", ev => {
	this.stopAutoPlay();
	this.setAutoPlay();
	});
	this.setAutoPlay();
	});
	}
	};
	</script>

	<style scoped>
	.swiper {
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	width: 30rem;
	}
	.btnLeft,
	.btnRight {
	display: inline-flex;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.6);
	height: 2.5rem;
	width: 1.5rem;
	position: absolute;
	justify-content: center;
	align-items: center;
	cursor: default;
	user-select: none;
	backdrop-filter: blur(5px);
	}
	.btnRight {
	left: 28.5rem;
	}

	.swiper-images {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	z-index: 0;
	height: 15rem;
	width: 30rem;
	position: relative;
	left: -15rem;
	transition: transform 0.5s ease-in-out;
	}
	.swiper-image {
	min-width: 20rem;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
	}
	.indicator {
	position: absolute;
	height: 1.5rem;
	width: 6rem;
	margin-left: 12.5rem;
	margin-top: 5.5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	z-index: 10;
	}
	.indicator-item {
	height: 0.7rem;
	width: 0.7rem;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}
	.indicator-item:hover {
	box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25),
	4px 6px 10px 0px rgba(0, 0, 0, 0.22);
	}
	.indicator-item-selected {
	background-color: orange;
	}
	</style>