Example


jQuery('.p_list li').each(function(index){
		jQuery(this).click(function(){
			jQuery('#myModal').show();
			jQuery('.modal-content .list_content').removeClass("active");
			jQuery( ".list_content" ).eq( index ).addClass( "active" );

			jQuery('.dots .dot').eq( index ).click();
		});
	});

	jQuery('.dots .dot').each(function(index){
		jQuery(this).click(function(){
			jQuery('.dots .dot').removeClass("dot_active");
			jQuery(this).addClass('dot_active');
			jQuery('.modal-content .list_content').removeClass("active");
			jQuery( ".list_content" ).eq( index ).addClass( "active" );
		});
	});


	jQuery('.next_btn').click(function(){
		let $currentListItem = $(".list_content.active");

		let $nextListItem = $currentListItem.next(".list_content");
		if ($nextListItem.length) {
			$currentListItem.removeClass("active");
			$nextListItem.addClass("active");
		}


		let $currentDot = $(".dot.dot_active");
		let $nextDot = $currentDot.next(".dot");
		if ($nextDot.length) {
			$currentDot.removeClass("dot_active");
			$nextDot.addClass('dot_active');
		}


	});

	jQuery('.prev_btn').click(function(){
		let $currentListItem = $(".list_content.active");
		let $preListItem = $currentListItem.prev(".list_content");
		if ($preListItem.length) {
			$currentListItem.removeClass("active");
			$preListItem.addClass("active");
		}

		let $currentDot = $(".dot.dot_active");
		let $nextDot = $currentDot.prev(".dot");
		if ($nextDot.length) {
			$currentDot.removeClass("dot_active");
			$nextDot.addClass('dot_active');
		}
	});



	jQuery('.close').click(function(){ 
           jQuery('#myModal').hide(); 
        });

	

<style type="text/css">
		body {margin: 0;} ul.p_list {list-style: none;} .p_list li {margin: 15px;}

		/*Modal Css*/
		#myModal { display: none; position: fixed; width: 100%; height: 100%; background: #000;	top: 0; color: #fff; z-index: 999; animation: popup 0.7s;	}
		.active {animation: fadeinout 2s; } 
		#myModal p { color: #000; }
		.dot_active, #myModal { transition: all .6s ease-in-out; }
		.modal-content {height: 100%;}
		.list_content {display: none;}
		.list_content.active {display: block;}
		.dots, .modal-content, .next_btn, .prev_btn { display: flex; align-items: center; justify-content: center;} 
		.dots { position: absolute;	bottom: 50px; left: 50%; gap: 8px; height: 18px; } 
		.dot { width: 18px; height: 100%; background: #d7caca; border-radius: 100%; border: 1px solid;}
		.dot.dot_active {background: #000;}
		.next_btn, .prev_btn {	position: absolute;	top: 50%; width: 50px; height: 50px; background: #000; right: 0; }
		.prev_btn {left: 0;}
		.close.next_btn { top: 30px; } 



		/*Keyframes*/
		@keyframes popup {
			0%{
				transform: scale(0.1);
			}

			100%{
				transform: scale(1);
			}
		}

		@keyframes fadeinout {
			0%{
				opacity:0;
				-webkit-transform: translateY(-100px);
				-moz-transform: translateY(-100px);
				-o-transform: translateY(-100px);
				transform: translateY(-100px);
			}

			100%
			{
				opacity:1;
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
		}


	</style>

<ul class="p_list">
		<li class="1 list_item">
			<a href="javascript:void(0)" id="myBtn1" class="modal-trigger pointer">What is Lorem Ipsum?</a>
		</li>
		<li class="2 list_item">
			<a href="javascript:void(0)" id="myBtn1" class="modal-trigger pointer">Where does it come from?
			</a>
		</li>
		<li class="3 list_item">
			<a href="javascript:void(0)" id="myBtn1" class="modal-trigger pointer">Why do we use it?
			</a>
		</li>
	</ul>

	<div id="myModal" class="modal">
		<div class="prev_btn"> <a href="#" class="previous round">‹</a></div>
		<div class="modal-content">
			<div class="1 list_content active" style="">
				<h2>What is Lorem Ipsum?</h2>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
			</div>

			<div class="2 list_content" style="">
				<h2>Where does it come from?</h2>
				<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000</p>
			</div>

			<div class="3 list_content" style="">
				<h2>Why do we use it?</h2>
				<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
			</div>
		</div>
		<div class="dots">
			<a href="javascript:void(0)" class="dot dot_active"></a>
			<a href="javascript:void(0)" class="dot"></a>
			<a href="javascript:void(0)" class="dot"></a>
		</div>
		<div class="next_btn"><a href="#" class="next round">›</a></div>
		<div class="close next_btn"><a href="#" class="next round">X</a></div>
	</div>