Adding a Post Carousel (image, title, excerpt)

  • Resolved Will

    (@skepticwebby)


    2 years, 7 months ago

    I’d like to add a few post carousels to my self-hosted WordPress homepage, one carousel per post category. Apparently this could be done by first installing the WordPress.com Editing Toolkit. However, this plugin crashes WordPress 6.3 Admin.

    I’d like to incorporate something simple and lightweight, perhaps like the “Default” or Multiple Slides” examples from Splied.js.com, or something similar to the carousel on thefp.com. I can’t find a WordPress plugin that can do post carousels like this, and implementing Splide.js is challenging for me. Perhaps I need to hire a WordPress Developer for something like this…

    Has anyone implemented something like this? Suggestions?

    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • corrinarusso

    (@corrinarusso)

    2 years, 7 months ago

    You are more than welcome to describe the issues you are having using the Splide js.

    You’ve tried their plugin?

    https://wordpress.org/plugins/splide-carousel/

    Their documentation is very strong as well:

    https://splidejs.com/guides/getting-started/

    Thread Starter Will

    (@skepticwebby)

    2 years, 7 months ago

    The Splide Carousel WordPress Plugin is limited.

    I was looking to implement Splide.js in order to display a specified number of posts (including their feature images, titles, and excerpts) using a WordPress query:

    <?php 
	$the_query = new WP_Query( array (
	'category_name' => 'ENTER-CATEGORY-NAME',
	'post_status' => 'publish',
	'posts_per_page' => 3,
   )); 
?>
<?php if ( $the_query->have_posts() ) : ?>
	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
		<?php if ( has_post_thumbnail() ) {
			$featured_image_UNIQUECATID = get_the_post_thumbnail(); }
		?>	

			<?php echo $featured_image_UNIQCATID; ?>
			<?php the_title_attribute(); ?>
			<?php the_excerpt(); ?>

	<?php endwhile; ?>

<?php wp_reset_postdata(); ?>
<?php else : ?>
	<p><?php __('No News'); ?></p>
<?php endif; ?>

    I needed to combine the above WordPress code with the following Splide code:

    <div class="splide" id="Carousel-Unique-ID" aria-label="Unique Accessibility Name">
	 <div class="splide__track">
		 <div class="splide__list">
			 <!-- splide__slide should repeat once for EACH post in the WordPress query array -->
			 <div class="splide__slide" data-splide-interval="6000">
				 <div class="splide__slide__container">
					<!-- 
					Feature image, title, excerpt from WordPress
					-->
				 </div>
			 </div>
		 </div>
	 </div>
	 <div class="splide__progress">
		 <div class="splide__progress__bar">
		 </div>
	 </div>
 </div>

    Combining the above, it looks like this:

    <div class="splide" id="Carousel-Unique-ID" aria-label="Unique Accessibility Name">
	 <div class="splide__track">
		 <div class="splide__list">
	 
			 <?php 
				 $the_query = new WP_Query( array (
				 'category_name' => 'ENTER-CATEGORY-NAME',
				 'post_status' => 'publish',
				 'posts_per_page' => 4,
				 )); 
			 ?>

			 <?php if ( $the_query->have_posts() ) : ?>
			 <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
			 
				 <!-- splide__slide should repeat once for EACH post in the WordPress query array -->
				 <div class="splide__slide" data-splide-interval="6000">
					 <div class="splide__slide__container">
						 <div class="FeatureImage">
		 
							 <?php if ( has_post_thumbnail() ) {
								 $featured_image_UNIQCATID = get_the_post_thumbnail(); }
							 ?>
							 <a href="<?php the_permalink(); ?>"> 
								 <?php echo $featured_image_UNIQCATID; ?>
							 </a> 
						 </div>
						 <div class="Title-and-Excerpt">
							 <h4><a href="<?php the_permalink(); ?>"> 
								 <?php the_title_attribute(); ?>
							 </a></h4> 
							 <p><?php the_excerpt(); ?></p>
						 </div>
					 </div>
				 </div>
				 
			 <?php endwhile; ?>
			 <?php wp_reset_postdata(); ?>
			 <?php else : ?>
			 <p><?php __('No News'); ?></p>
			 <?php endif; ?>
		 </div>
	 </div>
	 <div class="splide__progress">
		 <div class="splide__progress__bar">
		 </div>
	 </div>
 </div>

    So, that’s all working now.

    Where I’m stuck now is getting the Carousel Progress Bar to work properly. In the Introduction’s first example (https://splidejs.com/tutorials/carousel-progress/), the progress bar advances one step for each slide, as I would expect it to. However, in my test (see code below), the progress bar is continually progressing while viewing each slide (more like a timer, indicating how much time is left until the next slide). I’m not sure what’s wrong with this code. Obviously, this isn’t a wordpress problem. But, I’ll paste my code here anyway in case someone wants to try to figure it out. I’ll keep working on it.

    <!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" />
	<style>		
	</style>
</head>
<body>
<div class="splide" id="Carousel1" aria-label="Carousel One">
	<div class="splide__track">
		<div class="splide__list">
			<div class="splide__slide">
				<div class="splide__slide__container">
					Slide 1
				</div>
			</div>
			<div class="splide__slide">
				<div class="splide__slide__container">
					Slide 2
				</div>
			</div>
			<div class="splide__slide">
				<div class="splide__slide__container">
					Slide 3
				</div>
			</div>
		</div>
	</div>
	<div class="splide__progress">
		<div class="splide__progress__bar">
		</div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js">
</script>
<script>
	var splide1 = new Splide( '#Carousel1', {
	type: 'loop',
	autoplay: true,
	perPage: 1
	} ).mount();
	
	var bar = splide.root.querySelector( '.splide__progress__bar' );
	      
	// Updates the bar width whenever the carousel moves:
	splide.on( 'mounted move', function () {
  	var end  = splide.Components.Controller.getEnd() + 1;
  	var rate = Math.min( ( splide.index + 1 ) / end, 1 );
  	bar.style.width = String( 100 * rate ) + '%';
	} );
</script>
</body>
</html>
    Thread Starter Will

    (@skepticwebby)

    2 years, 7 months ago

    My example code above is working exactly like the example shown here (https://splidejs.com/extensions/intersection/) even though I haven’t included the splide-extension-intersection.min.js.

    Thread Starter Will

    (@skepticwebby)

    2 years, 7 months ago

    I think the problem with the progress bar not incrementing with each slide was that the the bar variable was not declared before the splide was mounted.

    This code works to increment the bar:

    var splide = new Splide( '.splide' );
var bar = splide.root.querySelector( '.my-carousel-progress-bar' );

// Updates the bar width whenever the carousel moves:
splide.on( 'mounted move', function () {
  var end  = splide.Components.Controller.getEnd() + 1;
  var rate = Math.min( ( splide.index + 1 ) / end, 1 );
  bar.style.width = String( 100 * rate ) + '%';
} );

splide.mount();

    Note: under the “JavaScript” heading on this page (https://splidejs.com/tutorials/carousel-progress/) the author uses .my-carousel-progress-bar as the querySelector, but on the Code tab in the example, under the heading “Introduction,” the author uses the following code for the bar:

      <div class="my-slider-progress">
    <div class="my-slider-progress-bar"></div>
  </div>

    Notice the class my-slider-progress-bar (above) doesn’t match the class my-carousel-progress-bar in the script. The classes have to match in order to work. So, this is the code to use for the bar if you use my-carousel-progress-bar in the script:

      <div class="my-carousel-progress">
    <div class="my-carousel-progress-bar"></div>
  </div>
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding a Post Carousel (image, title, excerpt)’ is closed to new replies.