Carousel does not move | ww.wp.xz.cn

(@littlebear211)

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

This topic was modified 4 years ago by littlebear211.

Viewing 15 replies - 1 through 15 (of 21 total)

(@littlepackage)

Hi @littlebear211

Where can we see your work in progress please? I assume you have enqueued bootstrap and dependencies if applicable?

Thread Starter

(@littlebear211)

https://testthemedesign.littleseabear.com/
Hi @littlepackage I just launched it for you to see.

Yep bootstrap is enqueued in the header, js script in functions:

**Functions.php**


function typechild_scripts(){
include( get_stylesheet_directory() . '/function-includes/inline-style.php' );
    wp_add_inline_style( 'child-style', $inline_styles );
    wp_enqueue_script( 'script', get_template_directory_uri() . '/assets/script.js', array ( 'jquery' ), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'typechild_scripts' );

**script.js**


jQuery( document ).ready( function( $ )
                          {
                              
$('#firstcarousel').on('slide.bs.carousel', function (e) {

    /*

    CC 2.0 License Iatek LLC 2018
    Attribution required
    
    */

    var $e = $(e.relatedTarget);
    
    var idx = $e.index();
    console.log("IDX :  " + idx);
    
    var itemsPerSlide = 8;
    var totalItems = $('.carousel-item').length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var 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');
            }
        }
    }
});

**CSS**


@media (min-width: 768px) {
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
        margin-right: initial;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
       }}

This reply was modified 4 years ago by littlebear211.
This reply was modified 4 years ago by littlebear211.

(@littlepackage)

OK…

https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js

should be a JavaScript file.

Same with slick.js: https://testthemedesign.littleseabear.com/slick/slick.min.js

It begins with HTML. Why?

Let’s start there and sort out why when these scripts are called, HTML files arise.

Thread Starter

(@littlebear211)

Hi @littlepackage, sorry I thought I enqued my scripts.js as a javascript file?
I have to call slick/slick.min.js too?

(@littlepackage)

Your scripts, if they are at https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js and https://testthemedesign.littleseabear.com/slick/slick.min.js should be scripts. Look at those URLS, or look in your file system (using FTP/SSH/cPanel however you’re doing it) and see that those files are not JavaScript files. They should ONLY include the scripts.

I don’t know if you need slick or not, but it has the same problem. You’ve got to sort that out.

Thread Starter

(@littlebear211)

I don’t have Slick in my directory, no idea why that’s come up. for the JS, this is what I have under

assets/scripts.js


/**
 * File script.js.
 *
 */
jQuery( document ).ready( function( $ )
                          {
                              
$('#firstcarousel').on('slide.bs.carousel', function (e) {

    /*

    CC 2.0 License Iatek LLC 2018
    Attribution required
    
    */

    var $e = $(e.relatedTarget);
    
    var idx = $e.index();
    console.log("IDX :  " + idx);
    
    var itemsPerSlide = 8;
    var totalItems = $('.carousel-item').length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var 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');
            }
        }
    }
});

This reply was modified 4 years ago by littlebear211.

(@littlepackage)

Have you tried going to: https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js

Is type a child theme?

Thread Starter

(@littlebear211)

Yes to both. I followed the directory on my cpanel (the actual link just takes me to the webpage)

This reply was modified 4 years ago by littlebear211.

(@littlepackage)

OK, I answered my own question. Type isn’t a child theme, but it really should be if you don’t want to lose your changes on your next theme update. If you want to make customizations like this, a first place to start would be to build a child theme. Or build this feature as a plugin.

Your “JS” file that you’ve tried to enqueue is not a JS file, or there is an error with how it’s being enqueued. Maybe try to enqueue it with a more unique name, not “script”.

(@littlepackage)

Yes to both. I followed the directory on my cpanel (the actual link just takes me to the webpage)

The actual link should absolutely not take you to the webpage. It should take you to a page like this: https://stats.wp.com/e-202221.js but with your scripts.

Thread Starter

(@littlebear211)

doesn’t take me there for some reason. I used this as a child theme for a different website fine, so not sure why it’s not enquing properly at the moment. I’ll try the unique name

Thread Starter

(@littlebear211)

I’ve tried to enqueue it with a more unique name.

(@littlepackage)

doesn’t take me there for some reason. I used this as a child theme for a different website fine, so not sure why it’s not enquing properly at the moment. I’ll try the unique name

Can you be more specific? What doesn’t take you where? What is your unique name? What is the new enqueue code?

If a file is at https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js

and you say this is the content:

/**
 * File script.js.
 *
 */
jQuery( document ).ready( function( $ )
                          {
                              
$('#firstcarousel').on('slide.bs.carousel', function (e) {

    /*

    CC 2.0 License Iatek LLC 2018
    Attribution required
    
    */

    var $e = $(e.relatedTarget);
    
    var idx = $e.index();
    console.log("IDX :  " + idx);
    
    var itemsPerSlide = 8;
    var totalItems = $('.carousel-item').length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var 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');
            }
        }
    }
});

Then that should be the content. It should absolutely show that, and only that. No redirects should occur to HTML pages.

(@littlepackage)

OK, great start… Your script loading is working now.

Perhaps ‘script’ is a forbidden handle for wp_enqueue_script() or you changed something else. Let me take another look now.

Thread Starter

(@littlebear211)

@littlepackage the script link from my site that you send me just takes me to the website.

the new name of the file is: customscripts.js and the code is:

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);
}

This reply was modified 4 years ago by littlebear211.

Viewing 15 replies - 1 through 15 (of 21 total)

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

Tags

In: Fixing WordPress
21 replies
2 participants
Last reply from: littlebear211
Last activity: 4 years ago
Status: not resolved

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics