特效描述:利用js实现 单排卡片 滚动切换代码。利用js实现单排卡片滚动切换代码
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet">
2. 引入JS
<script src='js/vue.min.js'></script> <script src="js/script.js"></script>
3. HTML代码
<h1>Vue.js 卡片滚动</h1> <script id="v-carousel" type="x/template"> <div class="card-carousel-wrapper"> <div class="card-carousel--nav__left" @click="moveCarousel(-1)" :disabled="atHeadOfList"></div> <div class="card-carousel"> <div class="card-carousel--overflow-container"> <div class="card-carousel-cards" :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}"> <div class="card-carousel--card" v-for="item in items"><img src="img/200x200.png"> <div class="card-carousel--card--footer"> <p>{{ item.name }}</p> <p>{{ item.tag }}</p> </div> </div> </div> </div> </div> <div class="card-carousel--nav__right" @click="moveCarousel(1)" :disabled="atEndOfList"></div> </div> </script> <div id="app"> <carousel></carousel> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>