Carousel does not move

  • littlebear211

    (@littlebear211)


    4 years ago

    I am trying to build a bootstrap carousel from scratch, similar to this one: https://littleseabear.com

    Can someone help me figure out why the row does not work as a carousel. I can’t seem to get further than either displaying a grid, or displaying three items with the 4th hidden. However the indicators do not cause the 4th item to come into view.

    My guess is because the “active” class doesn’t change when the prev or next buttons are pressed. If I put “item” class in the else statement, the slides disappear but the “item” class in the if statement breaks it out of the grid (as seen in image 1).

    index.php

    <?php
$qargs = array(

    'ignore_sticky_posts' => true,
    );
$the_query = new WP_Query( $qargs );

?>
 <?php if ($the_query->have_posts()) : $postCount = 1;  ?>
        <div class="container-fluid">
            <div id="firstcarousel" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-10 mxauto " role="listbox">
            
                
                 <?php   
                 while ( $the_query->have_posts() ) :   
                     $the_query->the_post(); 
                     $postCount++; 
               
                if ($postCount === 2){ ?>
        <div class="carousel item carousel-item col-md-4 "> 
               <?php the_post_thumbnail( 'small', ['class' => 'img-fluid mx-auto d-block active', 'title' => 'Feature image']); 
                  ?>
                   <div class="carousel-caption">
                  <h3 ><?php the_title();?></h3>
                    <p><?php the_excerpt();?></p>
                    </div>
                       </div>
                <?php } else { ?>
        <div class="carousel carousel-item col-md-4 "> 
               <?php the_post_thumbnail( 'small', ['class' => 'img-fluid mx-auto d-block ', 'title' => 'Feature image']); 
                ?>
                   <div class="carousel-caption">
                    <h3 ><?php the_title();?></h3>
                    <p><?php the_excerpt();?></p>
                    </div>
                </div>
            <?php } endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </div><!-- .carousel-inner -->
       <a class="left carousel-control" href="#firstcarousel" role="button" data-slide="prev"> 
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only"> Previous</span>
                </a>
                    <a class="right carousel-control" href="#firstcarousel" role="button" data-slide="next"> 
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only"> Next</span>
                </a>
    </div>
    </div>
<?php endif; ?>

    without item class
    with item class

Viewing 6 replies - 16 through 21 (of 21 total)
1 2
  • Thread Starter littlebear211

    (@littlebear211)

    4 years ago

    I changed template to stylesheet directory, not sure if that helps.

    Little Package

    (@littlepackage)

    4 years ago

    Replace your script.js with this:

    /**
 * File script.js.
 *
 */
jQuery( document ).ready( function($) {

	$("#firstcarousel").on( 'slide.bs.carousel', function (e) {

		/*

		CC 2.0 License Iatek LLC 2018
		Attribution required

		*/

		let $e = $(e.relatedTarget);

		let idx = $e.index();
		console.log("IDX :  " + idx);

		const itemsPerSlide = 8;
		let totalItems = $('.carousel-item').length;

		if ( idx >= totalItems - ( itemsPerSlide - 1 ) ) {
			let it = itemsPerSlide - ( totalItems - idx );
			for (let i=0; i < it; i++) {
				// append slides to end
				if ( e.direction == "left" ) {
					$('.carousel-item').eq(i).appendTo('.carousel-inner');
				}
				else {
					$('.carousel-item').eq(0).appendTo('.carousel-inner');
				}
			}
		}
	})
});

    Unfortunately other than that your Type theme has a JS error which will ultimately stop your carousel from running. Create this carousel while running a theme like twentytwentytwo or twentytwenty and contact the developers of Type to report the JS error seen in your browser console. Or maybe they’ve already fixed it — make sure your Type theme is up-to-date.

    Thread Starter littlebear211

    (@littlebear211)

    4 years ago

    Thank you, I’ll check that type is up to date and try another theme in the meantime

    Little Package

    (@littlepackage)

    4 years ago

    add_action( 'wp_enqueue_scripts', 'add_child_javascript' );
function add_child_javascript() {
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/assets/customscripts.js', array ( 'jquery' ), 1.1, true);
}

    If you are running a child theme then yes it should be stylesheet_directory. But still, you should really give your custom scripts custom names. The handle ‘script’ is dubious

    add_action( 'wp_enqueue_scripts', 'add_child_javascript' );
function add_child_javascript() {
wp_enqueue_script( 'my-customs-cript', get_stylesheet_directory_uri() . '/assets/customscripts.js', array ( 'jquery' ), 1.1, true);
}
    Little Package

    (@littlepackage)

    4 years ago

    I saw you going places then you reverted. You’re still going to have problems not only with your script as it was written, but with Type theme scripts, preventing anything from working.

    Hint: If you use twentytwentyone for testing until Type errors are sorted out, you’re going to have to enqueue the script for it.

    Another hint: your browser console is your friend. Your JavaScript errors are going to prevent this going anywhere.

    Finally, maybe you’ve gotten in a bit over your head with this project. It’s a great way to learn, and it’s how I learned (taking bites too big to chew, and chewing forever), but I’m a volunteer and cannot support you all the way through this project. I learned by Googling incessantly and trying trying trying again. I’ve given you some hints and tips, but have pointed out that 1) there are basic elements missing in your project and 2) things seem broken and 3) you don’t seem to know where to start and are needing a lot of guidance on fairly complex things. You will want to look for paid help to be respectful of the volunteers’ time and expertise here. You can find that at jobs.wordpress.net or codeable.io

    I wish you super luck! Someone *might* step in here, but you might be waiting a while.`

    Thread Starter littlebear211

    (@littlebear211)

    4 years ago

    @littlepackage thanks for your help, yep I reverted as I think twenty twenty two theme is blocking with the new block elements? Will try again soon, just had to get working back on my studies (unrelated to coding). Thanks for helping ^_^

    Php and Javascript is still new for me, I am more comfortable with html and css but wanted to give this a go.

Viewing 6 replies - 16 through 21 (of 21 total)
1 2

The topic ‘Carousel does not move’ is closed to new replies.

Tags