Vue.jsでswiper.jsを使おうとしましたが
Vue-resourceを使ってswiper.jsを適用したいですがどうすればいいでしょうか?
外部ライブラリーを使える方法などがございましたら教えていただければ助かります。
よろしくお願いいたします。
js
this.$http.get('https://api.com/v1/users') .then(function(users) { this.$set('users', users.json()); }).error(function(error) { console.log(error); });
HTML
<div class="row"> <users></users> </div> <template id="users-template"> <div class="col-lg-4 col-sm-6" v-for="user in users"> <div class="preview"> <div class="image"> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="build/img/cu1.jpg" class="img-responsive" alt="Cerulean"></div> <div class="swiper-slide"><img src="build/img/cu2.jpg" class="img-responsive" alt="Cerulean"></div> <div class="swiper-slide"><img src="build/img/cu3.jpg" class="img-responsive" alt="Cerulean"></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> </div> </template> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', slidesPerView: 1, paginationClickable: true, spaceBetween: 30, preloadImages: false, lazyLoading: true, loop: true }); </script>
あなたの回答
tips
プレビュー