I came across a fantastic color swatch plugin that I'm using, you can find it here. This plugin defines a custom Vue element which is pretty neat.
In addition, I followed this example to implement a JavaScript-based scrollbar for my project.
Here's the content of my .vue file:
<script> element:
export default {
name: "ProjectTask",
data: function() {
return { }
},
methods:
.
.
.
.
,
mounted() {
const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
rightBtn.addEventListener("click", function(event) {
const content = document.querySelector('#content');
content.scrollLeft += 300;
event.preventDefault();
});
leftBtn.addEventListener("click", function(event) {
const content = document.querySelector('#content');
content.scrollLeft -= 300;
event.preventDefault();
});
}
}
<template> element:
<div class="leftScroll" >
<button id="left-button"> swipe left </button>
</div>
<div class="ColorsWraper2 col-lg-8" id="content">
<swatches v-model="Project.color" :colors="color_picker" shapes="circles" inline></swatches>
</div>
<div class="rightScroll">
<button id="right-button"> swipe right </button>
</div>
<style> element:
.ColorsWraper2 {
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
The plugin's components should be positioned between the two buttons (left/right).
Unfortunately, I'm facing issues as it doesn't seem to work as expected!