Create Custom Post Type:
Open your theme's functions.php file and add the following code:
Copy code
function create_carousel_post_type() {
register_post_type('carousel',
array(
'labels' => array(
'name' => __('Carousel Items'),
'singular_name' => __('Carousel Item'),
),
'public' => true,
'has_archive' => true,
'supports' => array('title', 'thumbnail', 'custom-fields'),
)
);
}
add_action('init', 'create_carousel_post_type');
Create a Shortcode for Carousel:
Add the following code to create a shortcode that generates a Swiper-based carousel using the custom post type:
Copy code
function carousel_shortcode() {
ob_start();
$carousel_items = new WP_Query(array('post_type' => 'carousel', 'posts_per_page' => -1));
?>
<div class="myswiper">
<div class="swiper">
<div class="swiper-wrapper">
<?php
while ($carousel_items->have_posts()) : $carousel_items->the_post();
?>
<div class="swiper-slide">
<div class="card">
<div class="card__image"><?php the_post_thumbnail('full', array('alt' => get_the_title())); ?>
<h2 class="card__title"><?php the_title(); ?></h2>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('carousel', 'carousel_shortcode');
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
document.addEventListener('DOMContentLoaded', function () {
const swiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 4,
centeredSlides: true,
autoplay: {
enabled: true,
delay: 5000
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
});
function enqueue_portfolio_scripts() {
wp_enqueue_style('swiper-style', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css');
wp_enqueue_script('swiper-script', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js', array('jquery'), null, true);
wp_enqueue_script('portfolio-script', get_template_directory_uri() . '/path/to/your-portfolio-script.js', array('swiper-script'), null, true);
wp_enqueue_style('portfolio-style', get_template_directory_uri() . '/path/to/your-portfolio-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_portfolio_scripts');