CODEWITHSUNDEEP
jquerytwitter-bootstrap
Karolína Vyskočilová
Karolína Vyskočilová

Reputation: 1325

bootstrap carousel - .active goes on "prev" button and it stops working

I really don't understand this. I have offline version of this website (WP) on my localhost, everything works nicely - there are prev/next buttons on each side of carousel with "partners". But on web, it goes all wrong. Prev/next buttons are not visible and .active is from the first and second item moved to .carousel-control the prev one and it stops and make troubles as you can see on mentioned site.

my jquery:

$(document).ready(function() {
  $('#partneri-carousel').carousel({
    pause: "hover",
    interval: 4000,
  });
});

my code:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class='row'>
    <div class='col-offset-1 col-10'>
      <div class="carousel slide" data-ride="carousel" id="partneri-carousel">

        <div class="carousel-inner">

        <?php
               $partneri = ot_get_option( 'partneri', false);
               $n = 0;
               foreach ($partneri as $partner){

                    if ($n == 0) {
                        echo '<div class="item active">';
                    }

                    echo'<div class="col-3 column text-center">
                         <div class="logo">
                         <img src="'.$partner[partneri_logo].'">
                         </div>
                         <div class="popisek">'.$partner[partneri_popisek].'</div>
                         <div><a href="http://'.$partner[partneri_url].'" target="_blank">'.$partner[partneri_url].'</a></div>                                  
            </div>';
                    $n++;
                    if ($n % 4 == 0 AND $n != 0) {
                        echo '</div><div class="item">';
                    }


               }
               //if ($n % 4 == 1 ) {echo '</div>';}
               echo '</div>';
               ?>

        </div>

        <!-- Carousel Buttons Next/Prev -->
        <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><?php kybernaut_img("arr_simple_left");?></a>
        <a data-slide="next" href="#quote-carousel" class="right carousel-control"><?php kybernaut_img("arr_simple_right");?></a>
      </div>                          
    </div>
  </div>

</article>

Printscreen from offline version with description.

Upvotes: 1

Views: 247

Answers (1)

Karol&#237;na Vyskočilov&#225;
Karol&#237;na Vyskočilov&#225;

Reputation: 1325

@anpsmn was right:

1) The next/prev buttons were inside .carousel-inner.

2) Href of the buttons haven't been pointing to the carousel id.

Upvotes: 2

Related Questions