javascript - Bootstrap carousel controls not working with carousel background -
i trying set carousel background image profile page. have set in background , automatically cycles through photos without problems. however, when try use controls (which render properly), nothing happens , entire carousel highlighted. there class need put on controls? or perhaps css?
show
<link href='http://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type='text/css'/> <div class="container"> <div class="fb-profile"> <%= render 'pcarousel' %> <%= image_tag @provider.assets.first.photo.url(:thumb), class: "fb-image-profile thumbnail", align: "left" %> <% end %> <div class="fb-profile-text"> <h1><%= @provider.name %></h1> <h2><%= @provider.description %></h2> <p><%= @provider.tag %></p> <h3><%= render 'previews' %></h3> </div>
carousel partial
<div class="row-fluid"> <div id="pcarousel" class="carousel slide carousel-fade"> <ol class="carousel-indicators"> <li data-target="#pcarousel" data-slide-to="0" class="active"></li> <li data-target="#pcarousel" data-slide-to="1"></li> <li data-target="#pcarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active" data-interval="1000"> <%= image_tag("sky.jpg", :class => "img-responsive") %> <div class="carousel-caption"> <h3>forest</h3> <p>a beautiful scene trees, snow , northern lights.</p> </div> </div> <div class="item" data-interval="2000"> <%= image_tag("sk2.jpg", :class => "img-responsive") %> <div class="carousel-caption"> <h3>ocean</h3> <p>oh, wonderful expanse of sea.</p> </div> </div> <div class="item" data-interval="3000"> <%= image_tag("sk4.jpg", :class => "img-responsive") %> <div class="carousel-caption"> <h3>stream</h3> <p>a stream runs lazily through forest.</p> </div> </div> </div> <a class="left carousel-control" href="#pcarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#pcarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> </div> <script> $('.carousel').carousel({ interval: 8000 }); </script> css
/* carousel transition fade */ .carousel-fade { .carousel-inner { .item { opacity: 0; transition-property: opacity; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; transition-duration: .8s; } .active { opacity: 1; } .active.left, .active.right { left: 0; opacity: 0; z-index: 1; } .next.left, .prev.right { opacity: 1; } } .carousel-control { z-index: 2; } } // // removes control's background gradient .carousel-control.left, .carousel-control.right { background-image: none } /*carousel background sizing media query*/ .carousel { background: darken(darkgrey, 25%); position: relative; padding: 2px; width: 800px; height: 100%; @media screen , (max-width : 800px) { width: auto; } } // //puts provider show page carousel in background #pcarousel { z-index: -99; } i should note have carousel on home page of css referring to. #pcarousel z-index -99 code specific profile carousel. help!!
edit jsfiddle
<script> $('.carousel').carousel({ interval: 8000 }); </script>/* carousel transition fade */ .carousel-fade { .carousel-inner { .item { opacity: 0; transition-property: opacity; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; transition-duration: .8s; } .active { opacity: 1; } .active.left, .active.right { left: 0; opacity: 0; z-index: 1; } .next.left, .prev.right { opacity: 1; } } .carousel-control { z-index: 2; } } // // removes control's background gradient .carousel-control.left, .carousel-control.right { background-image: none } /*carousel background sizing media query*/ .carousel { background: darken(darkgrey, 25%); position: relative; padding: 2px; width: 800px; height: 100%; @media screen , (max-width : 800px) { width: auto; } } // //puts provider show page carousel in background #pcarousel { z-index: -99; }<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row-fluid"> <div id="pcarousel" class="carousel slide carousel-fade"> <ol class="carousel-indicators"> <li data-target="#pcarousel" data-slide-to="0" class="active"></li> <li data-target="#pcarousel" data-slide-to="1"></li> <li data-target="#pcarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active" data-interval="1000"> <img src="http://placehold.it/350x150"> <div class="carousel-caption"> <h3>forest</h3> <p>a beautiful scene trees, snow , northern lights.</p> </div> </div> <div class="item" data-interval="2000"> <img src="http://placehold.it/350x150"> <div class="carousel-caption"> <h3>ocean</h3> <p>oh, wonderful expanse of sea.</p> </div> </div> <div class="item" data-interval="3000"> <img src="http://placehold.it/350x150"> <div class="carousel-caption"> <h3>stream</h3> <p>a stream runs lazily through forest.</p> </div> </div> </div> <a class="left carousel-control" href="#pcarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#pcarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> </div>
Comments
Post a Comment