background to carousel-3d for each slide

[mariante]

Hi, I'm using vue-carousel-3d (thanks for that amazing vue stuff), already ajust way that I want, but i'm stuck trying to apply background style in for each .

This two GIF shows my console and screen when is executing.. I wanted to change style for each slider image in JSON.. Many many tests I did, different methods, trying use VUE watch, computed... Nothing work.. Any solutions? Thanks

GIF: http://i.imgur.com/SezgSQY.gifv http://i.imgur.com/pETlLXJ.gifv

CODE:

<div class="container">
  <h1>{{ msg }}</h1>
  <div class="carousel">
    <md-layout md-align="center" md-gutter>
        <h2>Carousel</h2>
          <carousel-3d :style="{ background: '#f3f3f3 url(' + bgSlides[currentIndex] + ') center center / cover no-repeat' }" :display="3" :perspective="5" :border="0" :space="850" :clickable="true" :minSwipeDistance="1" :autoplay="true" :autoplayTimeout="3000" :autoplayHoverPause="true" ref="carousel3d"> 
                <slide v-for="(item, i) in items" :key="item.id" :index="item.id - 1">
                    <figure>
                        <img :src="item.url">
                        <figcaption>
                            {{ item.title}} <br /> ID: {{ i + 1}}
                        </figcaption>
                    </figure>
                </slide>
        </carousel-3d>
    </md-layout>
  </div>
  <div class="mosaico offsetTop">
    <md-layout md-align="center" md-gutter>
        <!--h2>Mosaico</h2-->
    </md-layout>
  </div>
</div>
</template>

<script>
var jsonUrl = 'https://jsonplaceholder.typicode.com/photos?_limit=20'
export default {
  name: 'container',
  data () {
    return {
      msg: 'Galeria de Destaques',
      items: [],
      currentIndex: '',
      bgSlides: []
    }
  },
  mounted () {
    this.fetchData()
  },

  methods: {
    fetchData: function () {
      var self = this
      self.$http.get(jsonUrl).then(response => {
        self.items = response.data
        console.log(self.items.length + ' JSON length')

        self.bgSlides = self.items.map(el => el.url)

        for (var i = 1; i < self.bgSlides.length; i++) {
          // console.log(i)
          self.currentIndex = i
          // console.log(self.currentIndex)
        };

        console.log('Items: ' + self.items, '\n\nimage URL (inside JSON): ' + self.bgSlides, '\n\nCurrent Index LOOP: ' + self.currentIndex)
      }, response => {
        console.log(response)
      })
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
.offsetTop{
    margin-top: 30px;
}
.carousel-3d-container figure {
  margin:0;
}

.thisBg{
    background: #f3f3f3 url('') no-repeat center center;
}

.carousel-3d-container figcaption {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  bottom: 0;
  padding: 15px;
  font-size: 12px;
  min-width: 100%;
  box-sizing: border-box;
}
</style>

If i change bgSlides[currentIndex] in for currentIndex-1 or other number, the background changes to that reference color..

[pablohpsilva]

If you guys just emitted an event with the currentIndex would fix this issue. Something like an onChange, you know?

Cheers.

[Wlada]

Check callback example on this examples page: https://wlada.github.io/vue-carousel-3d/examples/

[Wlada]

@mariante Did you resolve the problem?

[mariante]

Hello, sorry for not respond before.. Yes i solved before reading your last topic..

        <carousel-3d :onSlideChange="slideChange" :startIndex="currentIndex" :style="{ background: '#f3f3f3 url(' + bgSlides[currentIndex] + ') center center / cover no-repeat' }" :display="3" :perspective="5" :border="0" :space="850" :clickable="true" :minSwipeDistance="1" :autoplay="true" :autoplayTimeout="3000" :autoplayHoverPause="true" ref="carousel3d"> 
                <slide v-for="(item, i) in items" :key="item.id" :index="item.id - 1">
                    <figure>
                        <img :src="item.url">
                        <figcaption>
                            {{ item.title}} <br /> ID: {{ i + 1}}
                        </figcaption>
                    </figure>
                </slide>
        </carousel-3d>

then

<script>
var jsonUrl = 'https://jsonplaceholder.typicode.com/photos?_limit=20'
export default {
  name: 'container',
  data () {
    return {
      msg: 'Galeria de Destaques',
      items: [],
      currentIndex: 0,
      bgSlides: []
    }
  },
  created () {
    this.fetchData()
  },

  methods: {
    fetchData: function () {
      var self = this
      self.$http.get(jsonUrl).then(response => {
        self.items = response.data
        console.log(self.items.length + ' JSON length')

        self.bgSlides = self.items.map(el => el.url)

        console.log('Items: ' + self.items, '\n\nimage URL (inside JSON): ' + self.bgSlides, '\n\nCurrent Index LOOP: ' + self.currentIndex)
      }, response => {
        console.log(response)
      })
    },
    slideChange: function (index) {
      this.currentIndex = index
    }
  }
}
</script>

[Wlada]

Thanks for respond. Just keep in mind in version 0.1.13 (latest) callback name is changed. Example on callbacks and names check on this link: https://jsfiddle.net/Wlada/dtwg9kr9/?utm_source=website&utm_medium=embed&utm_campaign=dtwg9kr9

Sorry about this change, but I did some development on this plugin in last couple of days, and I decided to change callback names.