CArousel Custom Post type Services

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');