CODEWITHSUNDEEP
javascripttwitter-bootstrapslider
user2025730
user2025730

Reputation: 380

Select var text and set styling

I am trying to select some text and bold it for when the slider advances to the next slide. I have the "Showing 1 out of 3" but when you cycle through it is not bold on the cycle. I would like to make sure the "showing #" is always bold. Here is my current code.

<div id="carousel-index" style="text-align: left;"><b>Showing 1</b> out of 3</div>

<script>

$('.Leadership').on('slid.bs.carousel', function () {


  var carouselData = $(this).data('bs.carousel');

  var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
  var total = carouselData.$items.length;

  var text = " Showing " + (currentIndex + 1) + " out of " + total;

  $('#carousel-index').text(text);
});

</script>

Upvotes: 0

Views: 61

Answers (2)

user2025730
user2025730

Reputation: 380

Well I figured this out the other day and was pretty embarrassed to post the fix:

Changing this $('#carousel-index').text(text); To this: $('#carousel-index').html(text);

<div id="carousel-index" style="text-align: left;"><b>Showing 1</b> out of 3</div>
$('.Leadership').on('slid.bs.carousel', function () { var carouselData = $(this).data('bs.carousel'); var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active')); var total = carouselData.$items.length; var text = " Showing " + (currentIndex + 1) + " out of " + total; $('#carousel-index').html(text); });

Upvotes: 0

dev1985
dev1985

Reputation: 171

You could just do:

var text = "< b >Showing " + (currentIndex + 1) + "< / b > out of " + total;

Then "Showing #" is always bold

Upvotes: 1

Related Questions