CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
probablybest
probablybest

Reputation: 1455

Bootstrap Carousel if item active add class to div then remove

I'm using a Bootstrap Carousel and I've added a class of testing to .link-txt depending on if .item is .active. However I want to remove the class from .link-txt once .active is removed from that specific .item. I don't seem to be able to remove the class with an if hasClass

Here is my jQuery so far:

$('#home-carousel').on('slid.bs.carousel', function() {
    if ($('.item').hasClass('active')) {
     $('.active .link-txt').addClass('testing');
    } else {
     $('.link-txt').removeClass('testing');
    }
});

HTML:

<?php
if( have_rows('carousel') ):?>
<div id="home-carousel" class="carousel bs-slider fade  control-round indicators-line" data-ride="carousel" data-interval="6000">
    <div class="carousel-inner" role="listbox">
    <?php 
    $i=0;
    while ( have_rows('carousel') ) : the_row();?>
        <div class="item  <?php if($i === 0) { ?> active <?php } ?>" style="background-image:url(<?php the_sub_field('image'); ?>);">
            <div class="carousel-caption">
                <div class="col-md-6 ">
                    <h1><a href="<?php the_sub_field('link');?>"><?php the_sub_field('heading');?></a></h1>        
                    <a href="<?php the_sub_field('link');?>" class="link-txt">View</a>
                </div>
            </div>
        </div>
    <?php 
    ++$i; 
    endwhile; ?>
    </div>
</div>
<?php endif;?>

Alongside not being able remove the class testing.... I've also spotted the first slide with .active is added into the HTML, but this doesn't seem to be detected with the jQuery. Meaning the class isn't added until the 2nd slide. Is there a way to detect .active on the first slide and add testing to .link-txt?

Here is Fiddle showing the issue.

Upvotes: 1

Views: 3352

Answers (1)

Doomenik
Doomenik

Reputation: 866

function linkClass() {
  $('.item .link-txt').removeClass('testing') //Remove every class no check necessary
  $('.item.active .link-txt').addClass('testing'); //Add the class to the active one
}

//Document ready so it works also on startup
$( document ).ready(function() {
    linkClass();
});

$('#home-carousel').on('slid.bs.carousel', function() {linkClass()});

It already works on first slide, your problem is just that it does not slide on the creation. So I added an document ready function so it will work also on startup.

EDIT: This example I have copied from https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp I added my code and if you open it with the developer console you will see it does exactly what you want. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Carousel Events - slid.bs.carousel</h2>
  <p>The <strong>slid.bs.modal</strong> event occurs when the carousel has finished sliding from one item to another.</p>
  <div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://via.placeholder.com/350x150" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/360x150" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="http://via.placeholder.com/370x150" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/380x150" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<script>
$(document).ready(function(){
    // Activate Carousel
    $("#myCarousel").carousel();
    
    // Enable Carousel Indicators
    $(".item1").click(function(){
        $("#myCarousel").carousel(0);
    });
    $(".item2").click(function(){
        $("#myCarousel").carousel(1);
    });
    $(".item3").click(function(){
        $("#myCarousel").carousel(2);
    });
    $(".item4").click(function(){
        $("#myCarousel").carousel(3);
    });
    
    // Enable Carousel Controls
    $(".left").click(function(){
        $("#myCarousel").carousel("prev");
    });
    $(".right").click(function(){
        $("#myCarousel").carousel("next");
    });

    $("#myCarousel").on('slid.bs.carousel', function () {
        $('.item img').removeClass('testing') //Remove every class no check necessary
        $('.item.active img').addClass('testing');
    });
});
</script>

</body>
</html>

Upvotes: 3

Related Questions