NUXT JS/VUE JS. SIMPLE SLIDER WITH DYNAMIC COMPONENT.

Check this post in my notes.

Introduction:

In the world of web development, sliders are a ubiquitous feature, appearing everywhere from title sections to product displays. While there are numerous external libraries like swiper-slider, vue-easy-slider, Slick, and more to simplify this task, Vue.js provides you with the tools to create your custom slider effortlessly. In this article, we'll explore one such approach with practical examples.

Pre-requisites:
To be able to create a slider, you will need to know the following:

• Vue.js or Nuxt.js;
• Familiar with dynamic components;

Getting Started:

Okay, so the first step is to create Vue.js project.

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support.

If you are unsure about an option, simply choose No by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server.

Create project structure:

Next, let's create a Slider component with the necessary slides (3 for example), and import them into the main render component. For me, it's an App.vue

Add slider:

Fulfill our slide components with data, for demonstrating purpose I added images.

Now, we will add dynamic into our Slider.vue. It's a place where Vue will render our slides dynamically, depending on the component that we will pass into :is directive (specifying the name or definition of the component to be rendered).

<template>
    <div>
        <component :is="renderedComponent" />
    </div>
</template>

Okay, we need to import components that contain slides and create a list of those imports. Also, add a computed property for example renderedComponent() that will update passed into :is directive component. Code below:

components: {
        SlideOne,
        SlideTwo,
        SlideThree
    },

    data() {
        return {
            componentToShow: 1,
            items: [
                {
                    id: 1,
                    type: SlideOne,
                },
                {
                    id: 2,
                    type: SlideTwo,
                },
                {
                    id: 3,
                    type: SlideThree,
                }
            ]
        }
    },

    computed: {
        renderedComponent() {
            return this.items.find(el => el.id === this.componentToShow).type;
        }
    }

Great, we have a basic slider on 3 slides, but for control, we will add buttons. I found some beautiful styled buttons from Uiverse.io.

Add control buttons:

Copy buttons from uiverse.io into the template with absolute positioning. Other styles at your request:

<template>
    <div>
        <button @click.prevent="moveBack"
            aria-label="Previus image"
            class="button-17 pagination-prev">
            <img class="arrow" src="../assets/icons/chevron-left-solid.svg" />
        </button>
            <transition name="fade">
                <component :is="renderedComponent" />
            </transition>
        <button @click.prevent="moveForward"
            aria-label="Next image"
            class="button-17 pagination-next">
            <img class="arrow" src="../assets/icons/chevron-right-solid.svg" />
        </button>
    </div>
</template>

We need to add moveForward and moveBack methods, they will change slides by updating the "componentToShow" data and that will trigger the renderComponent computed property to update the slider to change slides.

methods: {
        moveForward() {
            if (this.componentToShow < this.items.length) {
                this.componentToShow++;
            }
        },

        moveBack() {
            if (this.componentToShow > 1) {
                this.componentToShow--;
            }
        }
    }

Also if you want to change slides with some time interval just use the "setInterval" function that will call the next slide after some time.
Finally our result:

Other advice is to add for a component that will change the animation of our slider.
You can change any of those styles and create really beautiful sliders.

In conclusion, armed with Vue.js, dynamic components, and a dash of creativity, you have the power to craft beautiful, customized sliders that seamlessly integrate with your web projects. The possibilities are endless, and by experimenting with styles, animations, and transitions, you can create sliders that not only captivate your audience but also enhance the overall user experience of your websites. So go ahead, explore, and create your unique sliders to make your web development endeavors truly stand out.