A lightweight slider (kind of) for testimonials

Hi there,

If you would rather not use a plugin, then this should be helpful:
https://www.w3schools.com/w3css/w3css_slideshow.asp

You can build your own simple slider with CSS and some Javascript. :)

Thank you very much. This looks promising. For images this would be a simple and lightweight solution. For testimonials I would probably need something that is a bit more advanced. I will post the solution if I come up with something.

You are welcome and looking forward to your solution :)

I decided to go with a more powerful library for the slider. It is still very lightweight and needs only one external file (this page is just a prototype). The page nees some fine tuning, of course:

https://doriskirch.de/kundenstimmen-test/

This is the library:

https://flickity.metafizzy.co/

The library provides many options for further projects.

First, I registered the script and the custom post type for the testimonials:

function wpb_adding_scripts() {
    wp_register_script('flickity', get_stylesheet_directory_uri() . '/flickity.pkgd.min.js', array('jquery'),'1.1', true);
    wp_enqueue_script('flickity');
} 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 );

function kundenstimmen_cpt() {
  $labels = array(
      'name'               => _x( 'Kundenstimmen', 'post type general name' ),
      'singular_name'      => _x( 'Kundenstimme', 'post type singular name' ),
      'add_new'            => __( 'Neue Kundenstimme'),
      'add_new_item'       => __( 'Neue Kundenstimme' ),
      'edit_item'          => __( 'Kundenstimme bearbeiten' ),
      'new_item'           => __( 'Neue Kundenstimme' ),
      'all_items'          => __( 'Alle Kundenstimmen' ),
      'view_item'          => __( 'Kundenstimme ansehen' ),
      'search_items'       => __( 'Kundenstimmen durchsuchen' ),
      'not_found'          => __( 'Keine Kundenstimme gefunden' ),
      'not_found_in_trash' => __( 'Keine Kundenstimme im Papierkorb gefunden' ),
      'parent_item_colon'  => '',
      'menu_name'          => 'Kundenstimmen'
  );
  
  $args = array(
      'labels'              => $labels,
      'description'         => '',
      'hierarchical'        => false,
      'public'              => true,
      'show_ui'             => true,
      'show_in_menu'        => true,
      'show_in_nav_menus'   => true,
      'show_in_admin_bar'   => true,
      'publicly_queryable'  => true,
      'exclude_from_search' => false,
      'supports'            => array( 'title', 'editor', 'thumbnail' ),
      'taxonomies'          => array( '' ),
      'has_archive'         => false,
      'can_export'          => false,
      'menu_position'       => 5,
      'capability_type'     => 'post',
      'rewrite'             => array('slug' => 'kundenstimmen' )
  );
  
    register_post_type( 'kundenstimmen', $args );
  }
  
  add_action( 'init', 'kundenstimmen_cpt' );

I created a shortcode to keep things in the editor as simple as possible. The parameter "posts" sets the number of posts to show:

function kundenstimmen_shortcode($atts) {
 
  $args = array(
                  'post_type'      => 'kundenstimmen',
                  'posts_per_page' => $atts['posts'],
                  'publish_status' => 'published',
               );

  $query = new WP_Query($args);
  
  $result .= '<div class="carousel" data-flickity="">';

  if($query->have_posts()) :

      while($query->have_posts()) :

          $query->the_post() ;
                   
      $result .= '<div class="carousel-cell">';
      $result .= '<div class="kst-thumb">' . get_the_post_thumbnail() . '</div>';
      $result .= '<div class="kst-name">' . get_the_title() . '</div>';
      $result .= '<div class="kst-content">' . get_the_content() . '</div>';
      $result .= '</div>';

      endwhile;

      wp_reset_postdata();

  endif;
  $result .= '</div>';
  return $result;            
}

add_shortcode( 'kundenstimmen', 'kundenstimmen_shortcode' );

It is used like so:

[kundenstimmen posts=10]

Loading time is around 600 ms (if tested from Europe, the server is in Germany).

Was it worth the effort? If performance is top priority, I would say yes. I could even combine the javascript and would save the additional server request.

That looks great, good job!

A great example avoiding using slider plugins ;)

And it's very versatile. You could easily tweak the shortcode to support several parameters like so:

[shortcodename posts=10 posttype=movies type=slider]

That's awesome!