[Resolved] A lightweight slider (kind of) for testimonials

[mkjj]

This is not a support question. So, it is totally fine, if the support guys don’t feel any obligation to reply. But perhaps the community might have some ideas.

Many customers like sliders. I hate sliders. More often than not I can convince customers to not use them. However, for testimonials it makes at least some sense to use a slider-like element.

Most slider plugins are bloated. This is not acceptable for such a minor task, let alone on a superfast GP site. I don’t want a slider on my GP site. Period!

Has anybody ever found (or even created) a good solution for this? I don’t need fancy stuff in the dashboard or 100.000 settings. It would be totally fine for me to change all settings in the functions.php. No need for any user interface.

Any ideas would be very appreciated. Thank you!

[Ying]

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. 🙂

[mkjj]

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.

[Ying]

You are welcome and looking forward to your solution 🙂

[mkjj]

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.

[Ying]

That looks great, good job!

A great example avoiding using slider plugins 😉

[mkjj]

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

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

[Ying]

That’s awesome!

[Author]

Posts