react-id-swiper 触摸滑块

使用

import React from 'react';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';

const SimpleSwiper = () => (
  <Swiper>
      <div style={{height:100}}>Slide 1</div>
      <div style={{height:100}}>Slide 2</div>
      <div style={{height:100}}>Slide 3</div>
      <div style={{height:100}}>Slide 4</div>
  </Swiper>
)

export default SimpleSwiper;

效果图：可拖拽

import React from 'react';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';

const SimpleSwiperWithParams = () => {
  const params = {
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    spaceBetween: 30
  }

  return(
    <Swiper {...params}>
     	<div style={{height:100}}>Slide 1</div>
        <div style={{height:100}}>Slide 2</div>
        <div style={{height:100}}>Slide 3</div>
        <div style={{height:100}}>Slide 4</div>
    </Swiper>
  )
}

export default SimpleSwiperWithParams;

效果图：

const params = {
	slidesPerView: 6,
	slidesPerGroup: 1,  // 每次滑动个数
	loop: false,   // 是否可循环
	loopFillGroupWithBlank: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
};

<Swiper {...params}>
    <div style={{height:100}}>Slide 1</div>
    <div style={{height:100}}>Slide 2</div>
    <div style={{height:100}}>Slide 3</div>
    <div style={{height:100}}>Slide 4</div>
    <div style={{height:100}}>Slide 5</div>
    <div style={{height:100}}>Slide 6</div>
    <div style={{height:100}}>Slide 7</div>
    <div style={{height:100}}>Slide 8</div>
</Swiper>
             

效果图：可点击左右箭头移动

引入css

样式需另起一个style写，不能用scoped锁住，只有这样才能覆盖swiper的样式，

切记要引入swiper的自带样式，去nodemodules里面找。

来源链接：github.com/kidjp85/rea…

css来源链接：www.jianshu.com/p/95af7f748…

swiperjs：swiperjs.com/api/