WordPress menu itens to Swiper Slider

functions.php

<?php
  
add_shortcode( 'wp-nav-slider', 'nav_slider' );
function nav_slider( $atts ) { 
	if(empty($atts['id'])){
		echo 'enter menu id';
		return;
	}?>
	<div class="nav-slider-main">
		<div class="nav-slider-inner swiper-container">
			<div class="nav-slider swiper-wrapper">
				<?php 
					$menu_items = wp_get_nav_menu_items($atts['id']);
					if ($menu_items) {
						foreach ($menu_items as $menu_item) {
							$item_title = $menu_item->title;
							$item_url = $menu_item->url;
							$item_id = $menu_item->ID;
							echo "<div class='nav-slider-menu-item swiper-slide'><a href='$item_url'>$item_title</a></div>";
						}
					} else {
						echo "No menu items found.";
					}
					?>
			</div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"/>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
		<script>
			jQuery(document).ready(function () {
				var kaSwiper1 = new Swiper ('.nav-slider-inner', {
				paginationClickable: true,
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
				navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
				},
				slidesPerView: 'auto',
				spaceBetween : 5,
				autoHeight: true,
				});
			});
		</script>
		<style>
			.nav-slider-menu-item.swiper-slide {width: auto;}.nav-slider-main .swiper-button-disabled {opacity: 0 !important;}
			.nav-slider-main .swiper-button-next, .nav-slider-main .swiper-button-prev {width: 18px;background-size: 12px 16px;background-color: #fff;}
			.nav-slider-inner {padding: 0 20px;}.nav-slider-main .swiper-button-next {right: 0;}.nav-slider-main .swiper-button-prev {left: 0;}
		</style>			
	</div>
<?php	
}