1.1.0 • Published 3 years ago
easiest-carousell v1.1.0
The Easiest Carousell
How To Install
npm i easiest-carousell
Find the node_modules folder and you will instantly have the entire example project
Add the HTML configurations to your project
<link rel="stylesheet" href="/Carousell.css">
<div class="box-container-form-1">This is my first container</div>
<div class="box-container-form-2">This is my second container</div>
<div class="box-container-form-3">This is my third container</div>
<div class="container-buttons">
<button id="button1">This is the button 1</button>
<button id="button2">This is the button 2</button>
</div>
<script src="/EasiestCarousell.js"></script>
Add the CSS configurations to your project
/*this is the principal container*/
.box-container-form-1{
height: 200px;
width: 100%;
background-color: rgb(0, 68, 255);
position: absolute;
transition: 0.5s;
left: 0px;
}
/*---- If you need more container just add box-container-form-(replace for your number).----*/
.box-container-form-2{
height: 200px;
background-color: rgb(255, 0, 0);
width: 100%;
position: absolute;
left: 100vw;
transition: 0.5s;
}
.box-container-form-3,
.box-container-form-4,
.box-container-form-5{
height: 200px;
background-color: rgb(234, 0, 255);
width: 100%;
position: absolute;
left: 100vw;
transition: 0.5s;
}
.container-buttons{
background-color: rgb(153, 51, 148);
height: 200px;
width: 100vw;
margin-top: 200px;
position: absolute;
left: 0px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
Add the CSS configurations to your project
const first_button = document.querySelector('#button1');
const second_button = document.querySelector('#button2');
const form_counter = document.querySelectorAll('#form-container');
console.log(form_counter.length);
first_button.addEventListener('click', FirstButtonClicked);
second_button.addEventListener('click', SecondButtonClicked);
var counter = 0;
first_button.style.display = "none";
function FirstButtonClicked(){
second_button.style.display = "flex";
counter = counter - 1;
console.log(counter);
switch (counter) {
case 0:
SettingContainerBack(1,2);
break;
case 1:
SettingContainerBack(2,3);
break;
case 2:
SettingContainerBack(3,4);
break;
case 3:
SettingContainerBack(4,5);
break;
case 4:
SettingContainerBack(5,6);
break;
case 5:
SettingContainerBack(6,7);
break;
case 6:
SettingContainerBack(7,8);
break;
case 7:
SettingContainerBack(8,9);
break;
default:
break;
}
if(counter == 0){
first_button.style.display = "none";
}
}
function SecondButtonClicked(){
first_button.style.display = "flex";
counter = counter + 1;
console.log(counter);
switch (counter) {
case 1:
SettingContainerNext(2, 1);
break;
case 2:
SettingContainerNext(3, 2);
break;
case 3:
SettingContainerNext(4, 3);
break;
case 4:
SettingContainerNext(5, 4);
break;
case 5:
SettingContainerNext(6, 5);
break;
case 6:
SettingContainerNext(7, 6);
break;
case 7:
SettingContainerNext(8, 7);
break;
case 8:
SettingContainerNext(9, 8);
break;
default:
break;
}
if(counter == 4){
second_button.style.display = "none";
}
}
function SettingContainerNext(number1, number2){
const box_container1 = document.querySelector(`.box-container-form-${number1}`);
const box_container2 = document.querySelector(`.box-container-form-${number2}`);
box_container1.style.left = "0px";
box_container2.style.left = "-100vw";
}
function SettingContainerBack(number1, number2){
const box_container1 = document.querySelector(`.box-container-form-${number1}`);
const box_container2 = document.querySelector(`.box-container-form-${number2}`);
box_container1.style.left = "0px";
box_container2.style.left = "100vw";
}
if you want to prevent the second button from stopping counting when clicking further, edit this line in the js file
if(counter == stopslidenumber){
second_button.style.display = "none";
}