Vue Gallery Sliders With Touch Enabled?

TL;DR Are there any touch enabled gallery sliders like http://codepen.io/ritz078/pen/bEYOov written in VueJS?

I'm working on a project where users can create calendar events (ie: fairs, dance lessons etc). I'm using Dropzone to allow them to update new images. Each image they upload is linked to their user. When they create a second event, they will have some images already uploaded from the first event, which they might want to use in their second. I want to present it to them in such a way that they can easily select already uploaded images. I'm thinking the best way would be to present a horizontal image slider like this: http://codepen.io/ritz078/pen/bEYOov

They would then tap/click on the images they want to use and it would include them when the form is saved. Does anyone know of any sliders like that written in VueJS?

Full slider docs: http://darsa.in/sly/

slashequip

9 years ago

Best Answer

Level 6

I don't know of any written in Vue but I don't think it would be too hard to roll your own.

If you look at http://kenwheeler.github.io/slick/ it has everything you need to make a slider like the one in the codepen example.

You could do something like this in a Vue instance (or component).

new Vue({
    el: '#app',
    data: {
        slider: null
    },
    methods: {
        selectImage: function (img) {
            //add img to an array somewhere
        }
    },
    ready: function () {
        this.slider = $('.gallery').slick({
            //options
        });
    }
});

<div class='gallery'>
    <div v-for="img in images" @click="selectImage(img)">
        <img v-bind:src="img.url">
    </div>
</div>

Something like that anyway, hope that helps?

1 like

ZetecVan

9 years ago

Level 9

@wearewoolf Thanks for the link to Slick. I've not seen that before.

I was kind of expecting I'd have to roll my own. I was trying to do something last night with a different jquery gallery but was having issues with it overriding the divs and vue code I'd set up for the gallery (like in your html example). I'll have a play shortly and see what happens.

slashequip

9 years ago

Level 6

@ZetecVan no problem, Slick is my 'goto', seems very flexible and has a lot of build in features (vertical etc) so I really like using it.

ZetecVan

9 years ago

Level 9

@wearewoolf Slick was perfect. I created what I wanted in minutes and it worked (more or less) perfectly first time. Thanks :-)

1 like

drewb9

9 years ago

Level 5

For anyone not looking to use slick, there's also one for Flickity https://github.com/drewjbartlett/vue-flickity

import Flickity from 'vue-flickity';

new Vue({

    components: {
        Flickity
    },

    data () {
        return {
            flickityOptions: {
                initialIndex: 3,
                prevNextButtons: false,
                pageDots: false,
                wrapAround: true

                // any options from Flickity can be used
            }
        }
    },

    methods: {
        next() {
            this.$refs.flickity.next();
        },

        previous() {
            this.$refs.flickity.previous();
        }
    }
};

<flickity ref="flickity" :options="flickityOptions">
    <div class="carousel-cell">1</div>
    <div class="carousel-cell">2</div>
    <div class="carousel-cell">3</div>
    <div class="carousel-cell">4</div>
    <div class="carousel-cell">5</div>
</flickity>

<!-- if you don't want to use the buttons Flickity provides -->
<button @click="previous()">Custom Previous Button</button>
<button @click="next()">Custom Next Button</button>

Please or to participate in this conversation.