vue-carousel-3d.html

<div id="vue-carousel-3d-wrap"></div>

vue-carousel-3d.js

var slides = [
	{
		title: 'Slide 1',
		desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 2',
		desc: 'Lorem ipsum dolor sit amet ',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 3',
		desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. ',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 4',
		desc: 'Lorem ipsum dolor sit amet,  Enim, maxime.',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 5',
		desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 6',
		desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 7',
		desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 8',
		desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 9',
		desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
		src: 'https://placehold.it/360x270'
	},
	{
		title: 'Slide 10',
		desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
		src: 'https://placehold.it/360x270'
	}
]


var slideTpl = '';

slides.forEach(function (slide, index) {
	slideTpl += '<slide :index="' + index + '">';
		slideTpl += '<div class="vslide_item_wrap">';
			slideTpl += '<img src="' + slide.src + '" />';
			slideTpl += '<p>' + slide.desc + '</p>';
		slideTpl += '</div>';
	slideTpl += '</slide>';
});


new Vue({
	el: '#vue-carousel-3d-wrap',
	template: '<carousel-3d :controls-visible="false">' + slideTpl + '</carousel-3d>',
	components: {
		'carousel-3d': Carousel3d.Carousel3d,
		'slide': Carousel3d.Slide
	}
})