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">
Change
<div class="slider">
<transition-group tag="div" v-bind:name="transitionName">...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>
Change the
let slider = new Vue({
el: "#app",
data: {...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!