0

I want to make three element below the carousel change during slideshow. To indicate the specific slide that corresponds with the element.

I have done my research, but every time I try to implement someones code it only displays all three elements on or off. The carousel uses CSS to activate (.active) a slide like all three slides are showing at once but you only see the one in front.

Basically, I have two images per element and they are they same but different colors so when one slide appears it should switch to the other src image with a little js; I have done this, but it will only work with the onclick function not when a slide is automatically selected.

By the way, my goal is to get the slides to fire each element if the user clicks on prev, next, the indicators, or during intervals. I have goten this to work in basic HTML, but bootstraps inner working seems very difficult to manipulate for me.

$(function() {  
// Cycles the carousel to a particular frame when clicked and changes the img

  $('#icon1').click(function() {
    $("#myCarousel").carousel(0);
    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon1').src='icon-hover.png' //this img is blue
    }

    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon3').src='icon3.png' //this img is black
    }

    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon2').src='icon2.png'
    }
  });

  //these are x3 but with different .carousel(numbers) and images in increment

  // Cycles the carousel to a particular frame when clicked and changes the text color
  $("#icon1").click(function() {
    $("#myCarousel").carousel(0); //the 0 is the slide.index/length
      if ($("#myCarousel").carousel(0)) {
        $('.element1').css('color', '#1462ba')
      }

      if ($("#myCarousel").carousel(0)) {
        $('.element2').css('color', 'black')
      }

      if ($("#myCarousel").carousel(0)) {
        $('.element3').css('color', 'black')
      }
    }); 

    //these are x3 but with different .carousel(numbers) and colors in increment
  });
rfornal
  • 5,072
  • 5
  • 30
  • 42
Anthony
  • 111
  • 4
  • Bootstrap carousels have [events](http://getbootstrap.com/javascript/#carousel-events) associated with them. Perhaps binding to those, rather than `onclick`, can get you what you want. – Ouroborus Nov 17 '16 at 23:55
  • what other events could I use – Anthony Nov 18 '16 at 03:38
  • Err, the bootstrap carousel events that I linked to are the events you could use. Since you don't have to stick to the standard set of events, some libraries will include there own custom events. Bootstrap carousel includes two events that are fired before and after the carousel changes slides regardless of how the slide change is triggered. – Ouroborus Nov 18 '16 at 05:00
  • Still trying to get it to work but I feel like I need to change something with this "$("#icon1").click(function() {" and I need to change the .click to something else... – Anthony Nov 19 '16 at 05:01
  • Probably shouldn't be using the shortcut event handlers as they're only available for the default events. jQuery has a [generic handler](http://api.jquery.com/on/) in which you specify events you want to handle. `$("#icon1").on("slid.bs.carousel",function(){/* stuff */});` – Ouroborus Nov 19 '16 at 19:08
  • I have been trying the .slid and .slide what happens with .slide is the first icon will change but it will cycle between the first and second slide and the .slid will fire the first icon when the slide tries to transition or next or prev is pressed and it will show the first slide only also the console shows RangeError: Maximum call stack size exceeded. To be honest I think I am linking things wrong #icon1 is just an id tag on an img or that I am adding another function that contradicts the first click event code idk. – Anthony Nov 20 '16 at 03:07

0 Answers0