npm install vue-awesome-swiper --save
Vue-Awesome-Swiper
installed successfully as prompted on the official website
main.js
npm install vue-awesome-swiper --save
Vue-Awesome-Swiper
installed successfully as prompted on the official website
main.js
for children's shoes with the same problem as me, you can consider directly quoting swiper
npm install swiper --save-dev
official website API https://www.swiper.com.cn/api.
<script>
import Swiper from 'swiper';
export default {
name: "home",
data() {
return {
msg: "",
};
},
mounted(){
new Swiper ('.swiper-container', {
loop: true,
//
pagination: {
el: '.swiper-pagination',
},
//
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
}
};
</script>
Hello, landlord! Does this affect your normal use? If not, it should have something to do with your vscode
configuration.
Hello, let me ask, can't you find a solution to the problem in your vue broadcast plug-in module? I also have this problem here. Can you show it to me? thank you, qq 1018715564
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
configuration in Data:
components: {
swiper,
swiperSlide
},
swiperOption: {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 0,
mousewheel: true,
autoHeight: true,
pagination: {
el: '.swiper-pagination',
clickable: false,
type : 'fraction'
},
effect:'slide',
speed:500,
longSwipesRatio:0.3,
resistanceRatio:0.1
}
computed method:
computed: {
swiper() {
return this.$refs.pageSwiper.swiper
}
},
template code:
<swiper :options="swiperOption" class="swiper-box" ref="pageSwiper">
<swiper-slide class="swiper-item">
</swiper-slide>
<div class="swiper-pagination" slot="pagination" v-show="true"></div>
</swiper>
Previous: The php project server shows that mysql_connect has been abandoned?
Next: How to better verify the contents of multidimensional arrays
use vue as the project, and use node as the middle layer to deal with the data returned by the background interface. Online is how to deploy node-related code. For example, when you are local, you want to start node and how to handle it on the server. Do...
back-end programmer, front-end learning, the problem is very simple, don t spray me. my code: export default { name: hello , data () { return { msg: welcome , object:{ name: Runoob , url: Google , ...
there is no problem within an hour or two when the computer is turned on every day, and then it starts to report errors endlessly, this info?. What has been floating red, resulting in the interface behind can not be accessed, attached Google browser err...
the express project has been configured with pm2 on the server and can be started successfully. The node port of express is 3000 now you can see the data under the corresponding node api by visiting http: 132.232.193.33:3000 about. My nginx currently...
1. Previously, I used native js to develop a system similar to vuejs, online drag and drop to generate web pages, but now the second version wants to change vuejs or ng 2. The logic before is dragged into the console, saved or released, and then the dom...
I wrote a small front-end project in Vue. The back-end uses Express, front-end and back-end in two different directories. I use two command line windows locally to open npm start joint call normally. Now I configure the back-end directory separately to ...
:node v11.6.0npm 6.5.0vue cli 3.3.0 demo, 7nz < H1 > final solution: < H1 > rm -fr node_modules package-lock.json npm install npm run serve Note: yarn install can also solve this problem ...
test.js import store from . store import config from . .. config config import routes from . .. .. router index let saveData = store.fetch() console.log(store) console.log(config) console.log(routes) undefined ask the great g...