• Home
  • Simple slideshow build with Vue.js

Simple slideshow build with Vue.js

Today I will demonstrate here how I build simple image slideshow component with help of Vue.js and Bootstrap. Full source code is available on my Github. First of all I need to explain that this component is forked from my another component that I build for one of my clients.

I cant show you the code from app that I build for that client ( because we have NDA – non disclosure agreement) but here is simple standalone version with core features… so maybe I will call this as version 01. beta :). Client that is build for gave me the permission to show you this slightly modified code.

There are many image slider components or plugins mostly build with JQuery (or other libraries) but I want to build some slider that dont require famous JQuery. See my source code on Github so you can see parts that I will explain here. For everything to work in my example I include references to bootstrap and vue (css and script) in code and I also put some style which is only here for demo purposes and not represent final css that I use on my clients app.

In this simple example I use direct <script> include but in real world example that I build for client everything is done with standard vue-cli approach. If you dont know CLI …hmm .. CLI assumes prior knowledge of Node.js and the associated build tools and also bundlers. If you are new to Vue or front-end build tools please see official Vue page.

So in this simple approach you see this scripts in head of document.

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

I will not explain in detail here CSS style that is in head of document. Let me say this … I implement some quick simple CSS rules that style look of elements on this page and you can change them or experiment with it.

Here is code for container that holds the big image in slider

<div class="slideshow-container">
    <transition name="fade" mode="out-in" :duration="{enter: 500, leave: 800}">
        <div class="col-md-12" :id="['num_'+number]" v-for="number in [currentNumber]" :key="number"> <img width="1151" height="620" :src="images[Math.abs(currentNumber) % images.length]" /> </div>
    </transition>
    <a class="prev" @click="prev">&#10094;</a> 
    <a class="next" @click="next">&#10095;</a> 
</div>

As you see here we use <transition>. Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts. So big image in container will have fade transition when we change images in slider with click events on prev, next arrows. Also on transition wrapper component I use special duration prop which basically configure duration of fade start and fade end effect. For fade to work I also need to have special classes in my style (*look in head of document all classes with prefix fade)

Bellow main image there is thumbnail container with three images (*you can add more than three and everything will be working but you need to fix CSS). When you click on any thumbnail big image is changed to this clicked image with nice fade animation effect and also clicked thumbnail is placed in the middle (div container two from three divs that holds thumbnail). As you see you can use prev, next arrows or you can click on thumbnails to slide between images.

<div class="row hidden-sm hidden-xs" style="margin-top:3%">
     <div class="col-md-4"><img width="460" height="345" :src="images[Math.abs(currentNumber-1) % images.length]" @click="setThisImg(Math.abs(currentNumber-1) % images.length)" /></div>
     <div class="col-md-4"><img width="460" height="345" :src="images[Math.abs(currentNumber) % images.length]" @click="setThisImg(Math.abs(currentNumber-1) % images.length)" /></div>
     <div class="col-md-4"><img width="460" height="345" :src="images[Math.abs(currentNumber+1) % images.length]" @click="setThisImg(Math.abs(currentNumber-1) % images.length)" /></div>
</div>

So now I will try to explain methods and props that is used to get everything to work as expected.

data: {
            images: ['https://www.amadriapark.com/storage/app/media/upload/hotels/i504756hotelmilenij2.jpg', 'https://www.amadriapark.com/storage/app/media/upload/hotels/i404755hotelmilenij1.jpg', 'https://www.amadriapark.com/storage/app/media/upload/hotels/i604757hotelmilenij3.jpg'],
            currentNumber: 0,
            timer: null,
            show: true
        },

In above code we initialize some data.props that Vue use. In images array we put image sources for images that we wanna show and currentNumber here is actually index of first image that we show on page load.

methods: {
            startRotation: function() {
                this.timer = setInterval(this.next, 3000);
            },
            stopRotation: function() {
                clearTimeout(this.timer);
                this.timer = null;
            },
            next: function() {
                this.currentNumber += 1;
                this.show = true;
            },
            prev: function() {
                this.currentNumber -= 1;
                this.show = true;
            },
            setThisImg: function(imgnum) {
                this.currentNumber = imgnum;
            }
        }

In above code we see some methods that we call when user clicks on elements in slider. I hope methods are self explanatory, but I will quick explain them:

  • startRotation() set interval of 3 sec. between changes of images
  • stopRotation() clear timer var and set back to null. Function clearTimeout here is pure VanillaJS function and has nothing todo with Vue.
  • next() with this method we set current image index (next image index in array) so we can use it as src for showing in big container when somebody click next arrow.
  • prev() with this method we set current image index (previous image index in array)so we can use it as src for showing in big container when somebody click prev arrow.
  • setThisImg() with this method source for image is set based on param (image index) that is send to function. Use when user random clicks over thumbnails.

And that’s it. No more… Simple but very nice carousel type of slider is built with Vue.js and as you see there are no large code behind it as you would expect if you build this in JQuery.

See you soon in my next example from my previous works…

*Please note: I’m not a native english speaker – so forgive me grammar or other mistakes in text here 🙂 – is that ok? 

Tags: , ,

Copyright by Kristijan Klepač 2018