JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<div class="main-carousel" data-flickity='{ "prevNextButtons": false }'>
  <div class="carousel-cell">
    <p><input type="text" placeholder="Email" class="nnn"></p>
    <p><input type="text" placeholder="Пароль" class="nnn"></p>
  </div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
</div>

CSS

.main-carousel {
  width: 400px;
  margin:auto;
}
.carousel-cell {
    width: 100%;
    height: 160px;
    margin-right: 10px;
    background: blue;
}

input {
    width: 80%;
    height: 40px;
    display: block;
    margin: 0 auto;
}

.nnn {
pointer-events: none;
}

.p-on {
  pointer-events: auto !important;
}

JavaScript

let inputs = document.querySelectorAll('.nnn');
let sliderItems = document.querySelectorAll('.carousel-cell');

for(item of sliderItems) {
	item.addEventListener('click', function (e) {
  	inputs.forEach( function(input) {
    	input.classList.add('p-on');
    });
});
}