Vue 3d Carousel

Hi everyone :slight_smile:

I want to take this example:
https://jsfiddle.net/Wlada/kqen0yba/

and change the HTML elements to regular DIV’s instead of the &
a. Is that possible?
b. If so, how do I target those DIVs in line 8 & 9?

Thank you!

Sorry but I don’t understand your question. Do you want to change <carousel-3d> to <div>?

If that’s the case, you should implement these from scratch

1 Like

Hi @fizzy_martin !
Thank you :slight_smile:

Yes, that’s what I am after. And yea, I will implement these from scratch.
My question is:
How do I target those?

In line 8 there’s this:
'carousel-3d': window['carousel-3d'].Carousel3d,
Which targets the element directly.
I want to target the DIV by calssname, how do I do that?

If you want to target the DIV like

new Vue({
  el: '#example',
  components: {
    'testing': document.getElementsByClassName("something-unique")
  }
})

then no. It is not possible to do that. What you can do is wrap those DIV into a component, like

new Vue({
  el: '#example',
  components: {
    'testing': Vue.component('testing-subject', {
    	data: function () {
        return {
          example: "Hello World"
        }
      },
      template: `<div class="something-unique">{{example}}</div>`
    })
  }
})
1 Like

You’re saying that this structure:

<div id="example">
  <div id="carousel">
    <div class="slide" v-for="(slide, i) in slides" :index="i">
      <img src="https://placehold.it/360x270">
    </div>
  </div>
</div>

is impossible?

I think you need to be clearer in your intentions. What is your end goal? Are you trying to use this Vue 3D Carousel library? Are you trying to create your own components?

You can certainly structure your html any way you want, but in order to use the library you have to use their components. If you want to customise the slide then you need to make use of slots like in this example: https://jsfiddle.net/jamesbrndwgn/omrs29ye/

1 Like

I am trying to create this slide inside Webflow (a website builder).

In Webflow I don’t have <carousel-3d> or <slide> elements.
(I can add custom code with the original structure, but it is less versatile…)

Sorry, I don’t know anything about Webflow or what it’s capable of in terms of integrating 3rd party libs. You may be better off enquiring about your issue on their forums as it’s much more specific to Webflow than it is to Vue.

No no :slight_smile:
I know all about webflow.

I wanted to understand if this could work with regular DIVs. That’s it.
Thank you

When it comes to customizing Webflow I suggest to use a Vanilla JS 3D carousel lib instead.
You will be building the DOM structure using Webflows components and then the library should use this structure and “enhance” it into the 3d carousel.

This is not how Vue works.

In Vue you have a template and when you feed it a data-object, Vue brings that template “to live”.

So in order to make the Vue 3D carousel work with your Webflow setup you’d best be advised to write a “proxy” script, that parses all the data needed for the vue components out of the Webflow generated DOM and then you push that data into the carousel component.

Don’t try to adjust the carousel lib itself.

If you want to use your own DOM structure you are better off in using a 3D carousel that is based on jQuery or is vanilla JS as they tend to follow the “take a dom-node, pass some config params, make it a carousel” flow.

1 Like

Completely agree with you @abernh
But I have to say, that in all my searches, I have not yet found a good looking 3d carousel that is based on Vanilla JS or jQuery :confused:

See this example using the “original” webflow dom and a proxy script to parse in its data and feed it into the Vue component.

https://jsfiddle.net/abernh/wme3st8y/1/