vue实现简单的轮播图（一）

先实现静态的轮播图

index.vue

   <nav class="msite_nav">
      <div class="swiper-container" >
        <div class="swiper-wrapper">
          <div class="swiper-slide food_types_container">
            <router-link class="link_to_food" :to="'./components'">
              <figure>
                <img src="../assets/8.jpg" />
                <figcaption>零食</figcaption>
              </figure>
            </router-link>
      <router-link class="link_to_food" :to="'./components'">
              <figure>
                <img src="../assets/8.jpg" />
                <figcaption>零食</figcaption>
              </figure>
            </router-link>
                  <router-link class="link_to_food" :to="'./components'">
              <figure>
                <img src="../assets/8.jpg" />
                <figcaption>零食</figcaption>
              </figure>
            </router-link>
                  <router-link class="link_to_food" :to="'./components'">
              <figure>
                <img src="../assets/8.jpg" />
                <figcaption>零食</figcaption>
              </figure>
            </router-link>
                  <router-link class="link_to_food" :to="'./components'">
              <figure>
                <img src="../assets/8.jpg" />
                <figcaption>零食</figcaption>
              </figure>
            </router-link>
                  <router-link class="link_to_food" :to="'./components'">
              <figure>
                <img src="../assets/8.jpg" />
                <figcaption>零食</figcaption>
              </figure>
            </router-link>
                  <router-link class="link_to_food" :to="'./components'">
              <figure>
                <img src="../assets/8.jpg" />
                <figcaption>零食</figcaption>
              </figure>
            </router-link>
                  <router-link class="link_to_food" :to="'./components'">
              <figure>
                <img src="../assets/8.jpg" />
                <figcaption>零食</figcaption>
              </figure>
            </router-link>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets">
          <span class="swiper-pagination-bullet swiper-pagination-bullets-active"></span>
          <span class="swiper-pagination-bullet"></span>
        </div>
      </div>
    </nav>

index.css

.msite_nav {
  padding-top: 1.1rem;
  background-color: #fff;
  border-bottom: 0.025rem solid #e4e4e4;
  height: 8.6rem;
}

.msite_nav .swiper-container {
  width: 100%;
  height: auto;
  padding-bottom: 0.6rem;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.food_types_container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.food_types_container .link_to_food {
  width: 25%;
  padding: 0.3rem 0rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
figure,
figcaption {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: normal;
  font-family: "Microsoft Yahei";
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.food_types_container .link_to_food figure img {
  margin-bottom: 0.3rem;
  width: 1.8rem;
  height: 1.8rem;
}
.food_types_container .link_to_food figure figcaption {
  text-align: center;
  font-size: 0.55rem;
  color: #666;
}

/* 滚动点 */
.msite_nav .swiper-container .swiper-pagination {
  bottom: 0.2rem;
}
.swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
a {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: normal;
  font-family: "Microsoft Yahei";
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}