小程序轮播图前后各露出一小段样式实现，以及指示点自定义

wxml:
注：也可以使用wx:for循环*

<swiper class="swiper" next-margin="124rpx" previous-margin="124rpx" current="{
   
   {currentItemId}}" bindchange="swiperChange" circular>
    <swiper-item item-id="0" data-item-id="0" bindtap='clickChange'>
      <view class='row'>
        <view class='col {
   
   {currentItemId == 0 ? "selected" : ""}}'>
          <image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
        </view>
      </view>
    </swiper-item>
    <swiper-item item-id="1" data-item-id="1" bindtap='clickChange'>
      <view class='row'>
        <view class='col {
   
   {currentItemId == 1 ? "selected" : ""}}'>
          <image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
        </view>
      </view>
    </swiper-item>
    <swiper-item item-id="2" data-item-id="2" bindtap='clickChange'>
      <view class='row'>
        <view class='col {
   
   {currentItemId == 2 ? "selected" : ""}}'>
          <image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
        </view>
      </view>
    </swiper-item>
    <swiper-item item-id="3" data-item-id="3" bindtap='clickChange'>
      <view class='row'>
        <view class='col {
   
   {currentItemId == 3 ? "selected" : ""}}'>
          <image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
        </view>
      </view>
    </swiper-item>
    <swiper-item item-id="4" data-item-id="4" bindtap='clickChange'>
      <view class='row'>
        <view class='col {
   
   {currentItemId == 4 ? "selected" : ""}}'>
          <image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
        </view>
      </view>
    </swiper-item>
    <!-- </block> -->
  </swiper>
  <view class="dots">
      <view class="dot{
   
   {0 == currentItemId ? ' active' : ''}}"></view>
      <view class="dot{
   
   {1 == currentItemId ? ' active' : ''}}"></view>
      <view class="dot{
   
   {2 == currentItemId ? ' active' : ''}}"></view>
      <view class="dot{
   
   {3 == currentItemId ? ' active' : ''}}"></view>
      <view class="dot{
   
   {4 == currentItemId ? ' active' : ''}}"></view>
  </view>

js

page({
	data:{
	currentItemId: 1,//默认开始显示第几章轮播图，0为第一张开始
	},
  swiperChange: function (e) {
    var currentItemId = e.detail.currentItemId;
    this.setData({
      currentItemId: currentItemId
    })
  },
  clickChange: function (e) {
    var itemId = e.currentTarget.dataset.itemId;
    this.setData({
      currentItemId: itemId
    })
  },
})
    

css

page {
    
    
  padding-bottom: 96rpx;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #222222;
}

.swiper, swiper {
    
    
  width: 100%;
  height: 100%;
}

.row {
    
    
  width: 100%;
  height: 100%;
  box-shadow: 3rpx 4rpx 30rpx 8rpx #cccfd1;
  display: flex;
  align-items: center;
}

.title {
    
    
  font-size: 36rpx;
  text-align: center;
  margin-bottom: 50rpx;
}

.col {
    
    
  width: 500rpx;
  margin: 0 auto;
  height: 800rpx;
  /* transform: scale(0.9); */
  border-radius: 10rpx;
}

.col image {
    
    
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.selected {
    
    
  /* transform: scale(1); *//* box-shadow: 0px 0px 20rpx 5rpx #CCC; */
}

.swiper-box {
    
    
  position: relative;
  width: 100%;
}

.dots {
    
    
  position: absolute;
  left: 0;
  right: 0;
  top: 70rpx;
  display: flex;
  justify-content: center;
}

.dots .dot {
    
    
  margin: 0 8rpx;
  width: 15rpx;
  height: 15rpx;
  background: #A7A7A7;
  border-radius: 8rpx;
  transition: all 0.6s;
}

.dots .dot.active {
    
    
  /* width: 24rpx; */
  background: #FFFFFF;
}