Vue simple slider with Tailwind

I was recently encouraged to learn Vue by a coworker and whenever I learn something new a fresh set of app ideas and mini projects strike my mind as part of the fuel that pushes me into the: "how can this be done in ...? mindset.

Fortunately that led me to a very common situation for front end developers nowadays: Carrousels/sliders. We are so used to scrolling and sliding on the screen that it is almost mandatory to have that at some point on your ui.

So, how can this be done with Vue and Tailwind? Here's a super simple version of that using: Slick-carousel

I started the app using Nuxt, an intuitive framework for creating Vue applications. As simple as:

yarn create nuxt-app <project-name>

I called it slider-love ♥

On the index.vue I deleted everything except for one div I left as container class, looking like this:

<template>
  <div class="container">

  </div>
</template>

<script>
export default {}
</script>

Then I would add Tailwind to the project yarn add tailwindcss so I can use tailwind classes for a super simple and fast first build.

We are then going to have 3 components, a Header a Slider and a Footer components. Only because we are front end devs and we just cant help to have an app not look good :)

Here's a glimpse at Header.vue

<template>
    <div class="pl-12 pt-12 bg-white h-32 md:flex md:items-center md:justify-between">
    <div class="flex-1 min-w-0">
        <h2 class="text-2xl font-bold text-center leading-7 text-gray-900 sm:text-3xl sm:truncate">
        Welcome to Vue Slider Love!
        </h2>
    </div>
    <div class="mt-4 flex md:mt-0 md:ml-4">
        <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        ♥
        </button>
    </div>
    </div>
</template>

Footer.vue looks more complex but it really does nothing too fancy other than being a container for the 'logo' and giving some closure to the page.

<template>
    <footer class="bg-white" aria-labelledby="footerHeading">
    <h2 id="footerHeading" class="sr-only">Footer</h2>
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
        <div class="xl:grid xl:grid-cols-3 xl:gap-8">
        <div class="space-y-8 xl:col-span-1">
            <img class="h-10" src="../assets/sliderLogo.png" alt="Company name">
            <p class="text-gray-500 text-base">
            Creating a slider for fun and educational purposes using Vue Js & Tailwind
            </p>
        </div>
       </div>
    </div>
    </footer>
</template>

And finally the Slider! The fun part. We have a template rendering several <div> inside of it. Each div get's a random color for their background and a correspondent text naming that color.

<template>
    <div>
        <VueSlickCarousel v-bind="settings">
        <div class="h-80 bg-red-600 text-white text-center text-4xl font-semibold p-36">Red</div>
        <div class="h-80 bg-yellow-400 text-white text-center text-4xl font-semibold p-36">Yellow</div>
        <div class="h-80 bg-green-400 text-white text-center text-4xl font-semibold p-36">Green</div>
        <div class="h-80 bg-blue-600 text-white text-center text-4xl font-semibold p-36">Blue</div>
        </VueSlickCarousel>
    </div>
</template>

Then we import VueSlickCarousel and the css library we are going to need to make the carousel look good.

  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel.css'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

and we export our component default after naming it, declaring the VueSlickCarousel component and adding the settings we need to style it using the library we just imported.

We end up with a Slider.vue that looks like this:

<template>
    <div>
        <VueSlickCarousel v-bind="settings">
        <div class="h-80 bg-red-600 text-white text-center text-4xl font-semibold p-36">Red</div>
        <div class="h-80 bg-yellow-400 text-white text-center text-4xl font-semibold p-36">Yellow</div>
        <div class="h-80 bg-green-400 text-white text-center text-4xl font-semibold p-36">Green</div>
        <div class="h-80 bg-blue-600 text-white text-center text-4xl font-semibold p-36">Blue</div>
        </VueSlickCarousel>
    </div>
</template>

<script>
  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel.css'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

  export default {
    name: 'Slider',
    components: { VueSlickCarousel },
  data() {
    return {
      settings: {
        dots: true,
        infinite: true,
        rows: 1,
        initialSlide: 2,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        swipeToSlide: true,
        arrows: true,
      },
    }
  },
}
</script>

And that's it! You can now run yarn dev and navigate to local host port to see something like this:

Hope you like a simple slider! You now know how to use it so fill it with the content you want the to show the world!!

Feel free to check out the repo >> Slider-Love

Comments

[Tanzim Ibthesam]

Awesome 👍 Sliders are always a problem

[Josué Briceño]

This maybe could worked for me three days ago, but I found "Vue Carousel" and I used it. If you want to take a look, this is the link. ssense.github.io/vue-carousel/

[Raul]

Awesome! Thanks for sharing that