title: How to change animation in the bootstrap slider
body: <p>I already googled and found several solutions, but noone fits my needs, so i have to ask here:</p>
  
  <p>I found a website which contains a pretty awesome slider, see here: <a href="http://www.lysebu.no/en/hotel" rel="nofollow">http://www.lysebu.no/en/hotel</a>. I talk about the 2nd slider on the bottom. The slider itself is easy to build, but i was pretty impressed by the animation changes if you switch to another categorie, so i tried to rebuild it myself, maybe i can use it in future projects. Unfortunally, i have no idea how i can realize the animation change, i can only change the whole animation via CSS, but thats not what i want. My Slider contains 17 images and the structure is like the usual bootstrap slider. My attempt would be to change the CSS-Properties with the .css method of jQuery which looks like this (found the CSS-Code here on SO, just btw):</p>
  
  <pre><code>function change_ani() {
      item = $('.carousel .item');
  
      item.css("-webkit-transition", "opacity: 3s");
      item.css("-moz-transition", "opacity: 3s");
      item.css("-ms-transition", "opacity: 3s");
      item.css("-o-transition", "opacity: 3s");
      item.css("transition", "opacity: 3s");
  
      $(".carousel .active.left").css("left", 0);
      $(".carousel .active.left").css("opacity", 0);
      $(".carousel .active.left").css("z-index", 2);
  
      $(".carousel .active.right").css("left", 0);
      $(".carousel .active.right").css("opacity", 0);
      $(".carousel .active.right").css("z-index", 2);
  
      $(".carousel .active.next").css("left", 0);
      $(".carousel .active.next").css("opacity", 1);
      $(".carousel .active.next").css("z-index", 1);
  
      $(".carousel .active.prev").css("left", 0);
      $(".carousel .active.prev").css("opacity", 1);
      $(".carousel .active.prev").css("z-index", 1);
  
  }
  </code></pre>
  
  <p>The function gets called here:</p>
  
  <pre><code>$("#rooms_div").click(function() {
      showRooms();
      $('#carousel-slider2').carousel(0);
      change_ani();
  });
  </code></pre>
  
  <p>"#rooms_div is" the box in the slider which is glowing white at the beginning. Unfortunally, this doesnt work. Im not that familiar with JS or jQuery, so i hope someone got an idea how to solve this problem. It doesnt have to be perfect code, you can give me quick-and-dirty code too, i just want that it works. </p>