부츠랩 캐러셀이 장착된 VueJS 이미지 캐러셀에 전달 방법

부츠랩 캐러셀이 장착된 VueJS 이미지 캐러셀에 전달 방법

내 요구사항은 이와 같다.

1. 나는 백엔드에서 이미지 리스트를 받았다.
2. 나는 그 이미지 이름을 회전목마에 전달해서 이미지를 표시하고 싶다.

이건 내 암호야

<template>
  <div class="">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">

    <div class="carousel-item active" v-for="banner in banners">
      <img :src="`./assets/${banner}`" alt=""  class="img-fluid"   >

    </div>

  </div>
</div>
  </div>
</template>


<script>

export default {
  name: 'app',
  data () {
    return {
      banners:["logo.png","index.png","Capture.png"]
    }
  },
  methods:{

  }
}
</script>

그러나 이 방법은 효과가 없다.이미지를 회전목마 요소에 전달하려면 어떻게 해야 하는가?

문제는 당신이 모든 회전목마 슬라이드를active그래서 그것들은 모두 동시에 전시될 것이다.사용하다:class활성 슬라이드를 조건부로 설정하려면...

<div class="carousel-item" v-for="(banner,idx) in banners" :class="{ active: idx==0 }">
      <img :src="banner" alt="" class="img-fluid">
</div>

또한, 반드시:src="'./assets/${banner}'"참조는 실제로 이미지를 찾기 위해 작동하고 있다.

코드플라이 작업 데모

참고: jQuery를 사용하지 않으려는 경우$('.carousel').carousel();캐러셀을 싣는 건 이미 사용 중이니까data-ride="carousel"기여하다부트스트랩 4개 문서에 명시된 바와 같이...

데이터-라이드="Carousel" 속성은 캐러셀을 페이지 로드에서 시작하는 애니메이션으로 표시하는 데 사용된다.동일한 회전목마의 명시적 자바스크립트 초기화(중복적이고 불필요한)와 함께 사용할 수 없다.

출처: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

데이터 라이드="Carousel" 속성은 페이지가 로드되면 즉시 Bootstrap이 Carousel에 애니메이션을 시작하도록 지시한다.

페이지 로드 시 Vue가 아직 이 구성 요소를 마운트하지 않음.따라서 슬라이더가 장착된 후에만 슬라이더를 초기화하십시오.

그러니 당신은 제거해야 한다.data-ride="carousel", 및 추가$('.carousel').carousel()(jquery가 달린 후크에 있는$글로벌 변수로 사용 가능).이해했어?

<template>
  <div class="">
    <div id="carouselExampleSlidesOnly" class="carousel slide">
  <div class="carousel-inner">

    <div class="carousel-item active" v-for="banner in banners">
      <img :src="`./assets/${banner}`" alt=""  class="img-fluid"   >

    </div>

  </div>
</div>
  </div>
</template>


<script>

export default {
  name: 'app',
  data () {
    return {
      banners:["logo.png","index.png","Capture.png"]
    }
  },
  methods:{

  },
  mounted(){
      $('.carousel').carousel();
  }
}
</script>

참조URL: https://stackoverflow.com/questions/49571307/vuejs-with-bootsrap-carousel-how-to-pass-images-to-the-carousel