Two transition time for two different carousel in a page

For my website in a page has two different bootstrap carousels. Each should have the its own transition speed.After a long try i found a way out via javascript

document.getElementById("image1").style.cssText="position: relative;-webkit-transition: 5s ease-in-out left;-moz-transition: 5s ease-in-out left;-o-transition: 5s ease-in-out left;transition: 5s ease-in-out left;";

for html

  • Get/set current @keyframes percentage/change keyframes
  • quick and easy way to make google maps iframe embed responsive
  • @Font-face and wrong value of the offsetWidth attribute
  • Scrollable div to stick to bottom, when outer div changes in size
  • Fixed div related to its parent
  • JQuery-Mobile scrollbar
  • <div id="carouseltheme" class="carousel slide">
       <div class="carousel-inner" style="height:280px;margin-left:0em;">
           <div id="image1" class=" active item">
              <div class="row-fluid">
                  <div class="span12" style="margin-top:1em;margin-left:5.5em">
                    "inner-carousel"
                  </div>
              </div>                   
           </div>
           <div id="image1" class="item">
              <div class="row-fluid">
                  <div class="span12" style="margin-top:1em;margin-left:5.5em">
                      "inner-carousel"                
                  </div>
              </div>
           </div>
        </div>
     </div>
    

    the transition speed decreased but the slide is not consistent.
    please help me…

  • Using absolute image position
  • Javascript for breaks in multi-column layout
  • How to create customizable, dynamic grid layout using CSS and JavaScript?
  • Why is my animation “replayed” when an element is added via innerHTML?
  • Is it better to use jQuery fadeIn or CSS3 animations?
  • Fading in via CSS transition doesn't work properly
  • One Solution collect form web for “Two transition time for two different carousel in a page”

    Very simple to do. Add as many carousels as you want and make sure that the ID is unique for each.Then, use jQuery and set the intervals for each. The independent ID’s will also allow you to apply CSS for each as you see fit.

    $('#carouseltheme').carousel({
        interval: 600
    })
    $('#carouseltheme2').carousel({
        interval: 1500
    })
    $('#carouseltheme3').carousel({
        interval: 2000
    })