gianff / another-vue-carousel Goto Github PK

There will be a good idea to add more Carousel example configurations and also explain each prop for each one.

This link maybe helps: https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3

Look at mouse position when clicking on the rigth arrow:

There you can see how the carousel-container is moving itself to the rigth when clicking first time

There is a bug when you have more than one carousel in the same page:

• suppose you have carousel-1 and carousel-2, when clicking on the right arrow on carousel-1 then carousel-2 will also be right clicked.
• that is because we are emitting an event on the bus with a common name, we need to specify who has emitted that event.

If we extract the arrows to components then we will end up with a totally configurable Carousel

Untill now users will need to know how the carousel works in order to use the library.
That is becouse the carousel-items are coupled to the Carousel, for example:

      <div v-for="item in secondCarouselItems" v-bind:key="`fourth-item-${item}`" class="fourth-item" v-bind:style="`transform: translateX(${offset}px)`" >
        <img alt="Vue logo" src="./assets/logo.png" width="100px" height="300px">
      </div>

This line of code is in the main page and every carousel-item has it, that v-bind:style is coupling the customer item to the Carousel, if we extract a new component (i.e: carousel-item) and put that logic there, we will been decoupling the Carousel from customer items.

The Carousel need to have tests in order to check:

• when there are less items to show than items in total the arrows will appear.
• when there are more or equal items to show than items in total the arrows will not appear.
• we also need to test the maths inside the component.

We also need to add CI