Last active
January 26, 2024 16:34
-
-
Save nfsarmento/98e57246fb77c25e413f460aa992032a to your computer and use it in GitHub Desktop.
WordPress menu itens to Swiper Slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment