Carousel Slider

A Carrd demo for a carousel slider. Made using Vue.js, Bootstrap & Font Awesome.Delicious cookies not included. 🍪Get free Carrd template here.


Made by @jasonleowsg.

Double carousel tutorial

Here's how you can embed 2 or more carousels:

1. Click on the Embed element in the Carrd template with the code. Look for this part of the code:<div id="app">
<div class="slider">
<transition-group tag="div" v-bind:name="transitionName">...
Change app ID to something unique, e.g. app1.<div id="app1">
<div class="slider">
<transition-group tag="div" v-bind:name="transitionName">...


2. Scroll down the code and find this part:<script>
let slider = new Vue({
el: "#app",
data: {...
Change the slider to a unique ID, e.g. slider1. Also change the #app to the unique ID you set in step #1, e.g. #app1. The 2 changes to the code will look like this:<script>
let slider1 = new Vue({
el: "#app1",
data: {...


3. Repeat step #1 and #2 for the 2nd Embed for the 2nd carousel slider, or more, each time giving each carousel slider code a unique ID.

4. Publish, aaand done!