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');
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter