現在、VueJSとbxSliderを使用してスライド画面を作成しています。
以下のコードを書きましたが、画像が縦に連なって1枚として表示されてしまいます。
html
1 <div id="picture_slider"> 2 <div v-for="picture in pictures"> 3 <img v-bind:alt="picture.name" v-bind:src="picture.url"> 4 </div> 5 </div>
おそらく、VueJSでの展開後、以下のようになっていることは想像がついたのですが、
html
1 <div id="picture_slider"> 2 <div> 3 <img alt="Name1" src="picture1.jpg"> 4 <img alt="Name2" src="picture2.jpg"> 5 <img alt="Name3" src="picture3.jpg"> 6 </div> 7 </div>
以下の形式にするためにどう書けばよいかわからず、躓いています。
html
1 <div id="picture_slider"> 2 <div> 3 <img alt="Name1" src="picture1.jpg"> 4 </div> 5 <div> 6 <img alt="Name2" src="picture2.jpg"> 7 </div> 8 <div> 9 <img alt="Name3" src="picture3.jpg"> 10 </div> 11 </div>
どのようにすればよろしいでしょうか。
追記:2018/01/24
現在、laravel5.5のVueJSでスライドを表示しようとしています。
現在のコードです。
html
1<template> 2 <div> 3 <div id="banner_slider"> 4 <div v-for="banner in banners"> 5 <img v-bind:alt="banner.name" v-bind:src="banner.url"> 6 </div> 7 </div> 8 </div> 9</template> 10 11<script> 12 export default { 13 name: "index-component", 14 mounted() { 15 // トップスライダー 16 $('#banner_slider').bxSlider({ 17 auto: true, // 自動スライド 18 infiniteLoop: true, // 無限ループ 19 pager: false, // ページャー非表示 20 autoHover: true, // マウスオーバー時に自動遷移を停止 21 }); 22 }, 23 created() { 24 this.fetchBanners(); 25 }, 26 data() { 27 return { 28 banners: [] 29 } 30 }, 31 methods: { 32 // バナー取得 33 fetchBanners() { 34 axios.get('/api/banners') 35 .then(response => { 36 this.banners = response.data 37 }) 38 .catch(e => { 39 this.errors.push(e) 40 }); 41 } 42 } 43 44 } 45</script> 46 47<style scoped> 48 49</style>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/24 13:11