Display number of images in carousel

Hey Alin,
I don’t think anyone did that yet! Yes share it!
Cheers,
Nicolas

Yay! Yes please!

Finally I got it working. Here is the dev site where I used the code:
https://osansoft.com/lilotfruits/

Here are the code changes:
– under [your_site]/wp-content/themes/customizr/inc/css/[style_that_you_use].css
add:

.carousel-navigation  {
  top: 425px;
  left: 525px;
  position: absolute;
  z-index: 999;
  width: 230px;
}

.carousel-selection  {
  background: url('circle_grey.png') no-repeat;
  width: 32px;
  height: 32px;
  display: block;
  float: left;
}

.active {
  background: url('circle_blue.png') no-repeat;
}

– add in the same folder circle_grey.png and circle_blue.png. I got mine from: https://findicons.com/

– under under [your_site]/wp-content/themes/customizr/parts/class-header-slider.php
add:

<?php
                  $count = 1;
                  $path = get_stylesheet_directory_uri();
                  foreach ( $slides as $s) {
                    $slide_object   = get_post( $s);
                    if (!isset ( $slide_object)) {
                      continue;
                    }
                    if ($count == 1) {
                      $html = "<a id=\"$count\" href=\"#customizr-slider\" data-slide-to=\"$count\" class=\"carousel-selection active\"></a>";
                    } else {
                      $html = "<a id=\"$count\" href=\"#customizr-slider\" data-slide-to=\"$count\" class=\"carousel-selection\"></a>";
                    }
                    echo $html;
                    $count ++;
                  }
                ?>
              </div>

right after <div class="carousel-navigation">
Also add:

//click on button
                $('.carousel-navigation > a').click(function(){
                  var item = Number($(this).attr('id'));
                  $('#customizr-slider').carousel(item - 1);
                  $('.carousel-navigation .active').removeClass('active');
                  var item = $('#customizr-slider .item.active').index();
                  $('.carousel-navigation a:eq('+ item + ')').addClass('active');
                  return false;
                });

                //change image on next/prev - before animation
                $('#customizr-slider').bind('slid', function() {
                  $('.carousel-navigation .active').removeClass('active');
                  var idx = $('#customizr-slider .item.active').index();
                  $('.carousel-navigation a:eq(' + idx + ')').addClass('active');
                });

right after: $( '#customizr-slider' ).carousel(<?php echo $delay; ?>);

I have not tested the code with more than 5 slides. I think it would be a good idea to add a limit of 5 images per slide in the theme, as per recommendation from the link from my initial post.

If you find this code useful please feel free to incorporate it into the theme.

Thank you.

Alin

What version of Customizr does this code work in? I’m still using ver3.0.8 for one of my sites as I don’t want the huge hassle of redoing my header and footer after updating which I had to do with another site using this theme. I don’t see the class “carousel-navigation” in ver3.0.8.

Thanks

It didn’t seem to make it into 3.1.*

Now the code is stablilising, I’ll see if a Snippet might help (though the base code is above)

I made that change on Customizr 3.0.9

I intend to update the site that is using this theme to WP 3.8 and Customizr 3.1.5

I will post the changes here in the first week of January.

Terrific, look forward to seeing it.

Have a great Christmas/Holiday.

@alin.ticlea, I too am using Customizr 3.0.9 but I don’t see a .carousel-navigation class. What files did you find that code in? I don’t see <div class=”carousel-navigation”> in .class-header-slider.php file. Or am I missing something here?

Thanx.

I just backup and updated to 3.8 version of word press and the site looked like everything was still in its place, however the Display Buddy Carousel I use, pictures don’t show up. The shortcode is still on the pages and post pages but not thing shows up…..Here is the site https://www.thinkmalone.com

I just backup and updated to 3.8 version of word press and the site looked like everything was still in its place, however the Display Buddy Carousel I use, pictures don’t show up. The shortcode is still on the pages and post pages but not thing shows up…..Here is the site https://www.thinkmalone.com

If the only thing that changed was your upgrade to WP 3.8, then it looks like your Display Buddy Carousel is not compatible with WP 3.8. I would contact the authors of Display Buddy Carousel for help.

p.s. If you need help with Customizr, please start a new thread. Your problem is not related to this thread.

Correction: I’m using Customizr 3.0.9.

@alin.ticlea, I don’t see <div class=”carousel-navigation”> in the parent version of class-header-slider.php. Did you add that div yourself?

I was able to get this code working on my site and wanted to share some more specific information in case others want to take advantage of this neat code alin.ticlea developed.

You will notice that the html code for the slider is located in two seperate areas of the class-header-slider.php file. The top is the html for the homepage and the second for blog posts. I placed alin.ticlea’s code in both.

<div class=”carousel-navigation”> that alin.ticlea mentions above must be manually inserted into class-header-slider.php as it’s not part of the original Customizr code.

It does matter where this code is inserted in the file. I placed it just before the customizr-slider closing div tag ( </div> ) after ‘‹
›‘.

I originally tried to place it within <div class=”carousel-inner”> which resulted in undesirable effects.

Lastly, you will find ‘$( ‘#customizr-slider’ ).carousel(<?php echo $delay; ?>)’, which is mentioned above, at the bottom of class-header-slider.php. (Note that there is no ; ).

I hope this helps others.

Thanx alin.ticlea for this great piece of code.

@seahawksean – thank you. Do you have a link to your working demonstration please?