// create Triler Post type function create_trailer() { $labels = array( 'name' => _x( 'Trailer', 'Post Type General Name'), 'singular_name' => _x( 'Trailer', 'Post Type Singular Name'), 'menu_n ame' => _x( 'Trailer', 'Admin Menu text'), 'name_admin_bar' => _x( 'Trailer', 'Add New on Toolbar'), 'archives' => __( 'Trailer Archives'), 'attributes' => __( 'Trailer Attributes'), 'parent_item_colon' => __( 'Parent Trailer:'), 'all_items' => __( 'All Trailer'), 'add_new_item' => __( 'Add New Trailer'), 'add_new' => __( 'Add New'), 'new_item' => __( 'New Trailer'), 'edit_item' => __( 'Edit Trailer'), 'update_item' => __( 'Update Trailer'), 'view_item' => __( 'View Trailer'), 'view_items' => __( 'View Trailer'), 'search_items' => __( 'Search Trailer'), 'not_found' => __( 'Not found'), 'not_found_in_trash' => __( 'Not found in Trash'), 'featured_image' => __( 'Featured Image'), 'set_featured_image' => __( 'Set featured image'), 'remove_featured_image' => __( 'Remove featured image'), 'use_featured_image' => __( 'Use as featured image'), 'insert_into_item' => __( 'Insert into Trailer'), 'uploaded_to_this_item' => __( 'Uploaded to this Trailer'), 'items_list' => __( 'Trailer list'), 'items_list_navigation' => __( 'Trailer list navigation'), 'filter_items_list' => __( 'Filter Trailer list'), ); $args = array( 'label' => __( 'Trailer'), 'description' => __( ''), 'labels' => $labels, 'menu_icon' => 'dashicons-video-alt', 'supports' => array('title', 'editor','thumbnail','page-attributes'), 'taxonomies' => array(), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'menu_position' => 5, 'show_in_admin_bar' => true, 'show_in_nav_menus' => true, 'can_export' => true, 'has_archive' => true, 'hierarchical' => false, 'exclude_from_search' => false, 'show_in_rest' => true, 'publicly_queryable' => true, 'capability_type' => 'post', ); register_post_type( 'trailer', $args ); } add_action( 'init', 'create_trailer'); function trailer_loop() { ob_start(); wp_reset_postdata(); $arg = array( 'post_type' => 'trailer', 'posts_per_page' => -1, 'order' => 'ASC', ); $themeslider = new WP_Query($arg); $y = 1; ?> <div class="main_trailer_row"> <?php if ($themeslider->have_posts()) : ?> <?php while ($themeslider->have_posts()) : ?> <?php $themeslider->the_post(); ?> <div class="container-fluid trailer_innerMain" style="background:url( <?php if ( has_post_thumbnail() ) { the_post_thumbnail_url('full');} ?> )"> <div class="row align-item-end"> <div class="col-md-6"> <div class="tailer_img"> <h4><?php the_title(); ?></h4> <div class="home_content"><?php echo wp_trim_words( get_the_content(), 40, '' ); ?></div> </div> </div> <div class="col-md-6"> <div class="video-name"> <span>Video</span> </div> <a href="<?php the_field('traile_url'); ?>" target="_blank" class="video-image"> <div class="trailer-cont"> <img class="img-fluid rotating" src="<?php the_field('traile_img'); ?>" alt=""> </div> </a> </div> </div> </div> <?php endwhile; ?> <?php endif; ?> </div> <?php wp_reset_postdata(); return '' . ob_get_clean(); } add_shortcode( 'trailer_code', 'trailer_loop' ); // js jQuery('.main_movies_row').slick({ slidesToShow:4, slidesToScroll: 1, autoplay: true, arrows: true, centerMode: true, dots: false, nextArrow:"<span class='list-icon fas fa-arrow-left'></span>", prevArrow:"<span class='list-icon fas fa-arrow-right'></span>", adaptiveHeight: true, autoplaySpeed: 3000, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2 } }, { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] }); jQuery('.main_trailer_row').slick({ slidesToShow:1, slidesToScroll: 1, autoplay: true, arrows: true, centerMode: false, dots: true, nextArrow:"<span class='list-icon fas fa-arrow-right'></span>", prevArrow:"<span class='list-icon fas fa-arrow-left'></span>", adaptiveHeight: false, autoplaySpeed: 3000, });
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