In this article, I will guide how to create an Image Slider in Vue.js using daisyUI library.

Prerequisites

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal

vue create tailwindcss

Install daisyUI using following npm command

npm i daisyui

Open tailwind.config.js and add the following code.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Now right-click on the assets folder and add a new folder named 'Images' and some images in this folder

Image Slider in Vue.js using daisyUI

Now right-click on the components folder and add a new component named 'imagesliderdemo.vue'. Now open imagesliderdemo.vue component and add the following code

<template>
    <div class="cointainer">
        <div class="carousel w-full" style="margin-top: 30px;">
            <div id="item1" class="carousel-item w-full">
               <img src="../assets/Images/img1.jpg" style="height:480px" class="w-full" />
            </div>
            <div id="item2" class="carousel-item w-full">
               <img src="../assets/Images/img2.jpg" style="height:480px" class="w-full" />
            </div>
            <div id="item3" class="carousel-item w-full">
                <img src="../assets/Images/img4.jpg" style="height:480px" class="w-full" />
            </div>
            <div id="item4" class="carousel-item w-full">
                <img src="../assets/Images/img5.jpg" style="height:480px" class="w-full" />
            </div>
        </div>
        <div class="flex justify-center w-full py-2 gap-2">
            <a href="#item1" class="btn btn-xs">1</a>
            <a href="#item2" class="btn btn-xs">2</a>
            <a href="#item3" class="btn btn-xs">3</a>
            <a href="#item4" class="btn btn-xs">4</a>
        </div>
    </div>
</template>  
<script>
export default {
    name: 'imagesliderdemo',
    props: {
        msg: String
    }
}
</script>

Now open App.vue componen. add the following code in App.vue component

<template>
  <div id="app">
    <imagesliderdemo />
  </div>
</template>

<script>
import imagesliderdemo from './components/imagesliderdemo.vue'

export default {
  name: 'App',
  components: {
    imagesliderdemo
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Now run the application by using following command.

npm run serve

Image Slider in Vue.js using daisyUI

Image Slider in Vue.js using daisyUI

Summary

In this article, we learned how to create an Image Slider in Vue.js using daisyUI library.