Title: Carousel does not move
Last modified: May 23, 2022

---

# Carousel does not move

 *  [littlebear211](https://wordpress.org/support/users/littlebear211/)
 * (@littlebear211)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/carousel-does-not-move/)
 * I am trying to build a bootstrap carousel from scratch, similar to this one: 
   [https://littleseabear.com](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 ](https://i.stack.imgur.com/vu0WB.jpg)
    [with item class](https://i.stack.imgur.com/8YonN.jpg)
    -  This topic was modified 4 years, 1 month ago by [littlebear211](https://wordpress.org/support/users/littlebear211/).

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

1 [2](https://wordpress.org/support/topic/carousel-does-not-move/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/carousel-does-not-move/page/2/?output_format=md)

 *  [Little Package](https://wordpress.org/support/users/littlepackage/)
 * (@littlepackage)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674059)
 * Hi [@littlebear211](https://wordpress.org/support/users/littlebear211/)
 * Where can we see your work in progress please? I assume you have enqueued bootstrap
   and dependencies if applicable?
 *  Thread Starter [littlebear211](https://wordpress.org/support/users/littlebear211/)
 * (@littlebear211)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674088)
 * [https://testthemedesign.littleseabear.com/](https://testthemedesign.littleseabear.com/)
   
   Hi [@littlepackage](https://wordpress.org/support/users/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](https://wordpress.org/support/users/littlebear211/).
    -  This reply was modified 4 years ago by [littlebear211](https://wordpress.org/support/users/littlebear211/).
 *  [Little Package](https://wordpress.org/support/users/littlepackage/)
 * (@littlepackage)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674184)
 * OK…
 * [https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js](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](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](https://wordpress.org/support/users/littlebear211/)
 * (@littlebear211)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674201)
 * Hi [@littlepackage](https://wordpress.org/support/users/littlepackage/), sorry
   I thought I enqued my scripts.js as a javascript file?
    I have to call slick/
   slick.min.js too?
 *  [Little Package](https://wordpress.org/support/users/littlepackage/)
 * (@littlepackage)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674218)
 * [@littlebear211](https://wordpress.org/support/users/littlebear211/)
 * Your scripts, if they are at **[https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js](https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js)**
   and **[https://testthemedesign.littleseabear.com/slick/slick.min.js](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](https://wordpress.org/support/users/littlebear211/)
 * (@littlebear211)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674228)
 * 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](https://wordpress.org/support/users/littlebear211/).
 *  [Little Package](https://wordpress.org/support/users/littlepackage/)
 * (@littlepackage)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674241)
 * [@littlebear211](https://wordpress.org/support/users/littlebear211/)
 * Have you tried going to: [https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js](https://testthemedesign.littleseabear.com/wp-content/themes/type/assets/scripts.js)
 * Is **type** a child theme?
 *  Thread Starter [littlebear211](https://wordpress.org/support/users/littlebear211/)
 * (@littlebear211)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674247)
 * 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](https://wordpress.org/support/users/littlebear211/).
 *  [Little Package](https://wordpress.org/support/users/littlepackage/)
 * (@littlepackage)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674294)
 * OK, I answered my own question. Type isn’t a [child theme](https://developer.wordpress.org/themes/advanced-topics/child-themes/),
   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”.
 *  [Little Package](https://wordpress.org/support/users/littlepackage/)
 * (@littlepackage)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674303)
 * > 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](https://stats.wp.com/e-202221.js)
   but with your scripts.
 *  Thread Starter [littlebear211](https://wordpress.org/support/users/littlebear211/)
 * (@littlebear211)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674342)
 * 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](https://wordpress.org/support/users/littlebear211/)
 * (@littlebear211)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674370)
 * I’ve tried to enqueue it with a more unique name.
 *  [Little Package](https://wordpress.org/support/users/littlepackage/)
 * (@littlepackage)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674439)
 * > 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](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.
 *  [Little Package](https://wordpress.org/support/users/littlepackage/)
 * (@littlepackage)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674471)
 * OK, great start… Your script loading is working now.
 * Perhaps ‘script’ is a forbidden handle for [wp_enqueue_script()](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)
   or you changed something else. Let me take another look now.
 *  Thread Starter [littlebear211](https://wordpress.org/support/users/littlebear211/)
 * (@littlebear211)
 * [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/#post-15674472)
 * [@littlepackage](https://wordpress.org/support/users/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](https://wordpress.org/support/users/littlebear211/).

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

1 [2](https://wordpress.org/support/topic/carousel-does-not-move/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/carousel-does-not-move/page/2/?output_format=md)

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

## Tags

 * [html](https://wordpress.org/support/topic-tag/html/)
 * [js](https://wordpress.org/support/topic-tag/js/)
 * [php](https://wordpress.org/support/topic-tag/php/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 21 replies
 * 2 participants
 * Last reply from: [littlebear211](https://wordpress.org/support/users/littlebear211/)
 * Last activity: [4 years ago](https://wordpress.org/support/topic/carousel-does-not-move/page/2/#post-15674839)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics