1.1.0 • Published 3 years ago

easiest-carousell v1.1.0

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

The Easiest Carousell

How To Install

npm i easiest-carousell

Find the node_modules folder and you will instantly have the entire example project

Screenshot

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";
  }

This is all the configuration, remember that we will keep updating.

1.1.0

3 years ago

1.0.0

3 years ago