Parallax.js和Bootstrap Carousel

Question

我一直在試圖讓這個parallax.js在我的Bootstrap Carousel上工作，好消息是我已經使它工作得很好，但我不能讓旋轉木馬使用數據圖像滑動到下一個圖像-src。標題更改，但圖像保持不變，我在這裏錯過了什麼？不擅長編碼，所以你的幫助將被真正的讚賞。提前致謝！

反正我在這裏的代碼：

HTML

<!-- Wrapper for Slides --> 
    <div id="top" class="carousel-inner"> 
       <div class="item active"> 
      <!-- Set the first background image using inline CSS below. --> 
      <div class="fill parallax-window1" data-parallax="scroll" data-speed="0.5" data-image-src="images/slide4.jpg"></div> 
      <div class="carousel-caption verticalcenter"> 
       <div class="full-width text-center"> 
        <h1 class="captionhead" data-animation="animated fadeInUp">TITLE 1</h1> 
        <p data-animation="animated fadeInUp">Donec tempus risus eget bibendum sodales. Aenean efficitur mollis risus,nia nec.lacinia, lectus velit lobortis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><br><a class="learnmore" href="construction-update.html" data-animation="animated fadeInUp">LEARN MORE</a> 
       </div> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the second background image using inline CSS below. --> 
      <div class="fill parallax-window2" data-parallax="scroll" data-speed="0.5" data-image-src="images/slide1.jpg"></div> 
      <div class="carousel-caption verticalcenter"> 
       <div class="full-width text-center"> 
       <h1 class="captionhead" data-animation="animated fadeInUp">TITLE 2</h1> 
        <p data-animation="animated fadeInUp">Donec tempus risus eget bibendum sodales. Aenean efficitur mollis risus,nia nec.lacinia, lectus velit lobortis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
       </div> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill parallax-window3" data-parallax="scroll" data-speed="0.5" data-image-src="images/slide3.jpg"></div> 
      <div class="carousel-caption verticalcenter"> 
       <div class="full-width text-center"> 
       <h1 class="captionhead" data-animation="animated fadeInUp">TITLE 3</h1> 
        <p data-animation="animated fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus risus eget bibendum sodales. Aenean efficitur mollis risus,nia nec.lacinia, lectus velit lobortis arcu.</p> 
       </div> 
      </div> 
     </div> 
    </div> 

JAVASCRIPT

  <script> 
    $('.parallax-window1').parallax({imageSrc: 'images/slide4.jpg'}); 
    $('.parallax-window2').parallax({imageSrc: 'images/slide1.jpg'}); 
    $('.parallax-window3').parallax({imageSrc: 'images/slide3.jpg'}); 
    </script> 

希望有人能夠幫助我。提前致謝！

Answer 1

我一直在尋找，太多了，我發現與parallax.js解決方案從http://untame.net/2013/04/how-to-integrate-simple-parallax-with-twitter-bootstrap/

我使用的引導3.3.7，我用jQuery 1.12.x測試它到2.x

只需修改jQuery函數一點點，因此將在IMG的，而不是後臺工作：

$('section[data-type="background"]') => $('img[data-type="img"]') 
var coords = '50% '+ yPos + 'px'; => var coords = yPos +'px'; 
$scroll.css({ backgroundPosition: coords }); => $scroll.css('top', coords); 

概念證明這裏

// parallax.js from http://untame.net/2013/04/how-to-integrate-simple-parallax-with-twitter-bootstrap/ 
 
$(document).ready(function(){ 
 
    // cache the window object 
 
    $window = $(window); 
 
    
 
    $('section[data-type="background"]').each(function(){ 
 
    // declare the variable to affect the defined data-type 
 
    var $scroll = $(this); 
 
         
 
     $(window).scroll(function() { 
 
     // HTML5 proves useful for helping with creating JS functions! 
 
     // also, negative value because we're scrolling upwards        
 
     var yPos = -($window.scrollTop()/$scroll.data('speed')); 
 
      
 
     // background position 
 
     var coords = '50% '+ yPos + 'px'; 
 
    
 
     // move the background 
 
     // $scroll.css({ backgroundPosition: coords }); 
 
     $scroll.css('background-position', coords); 
 
     }); // end window scroll 
 
    }); // end section function 
 
    
 
    // http://stackoverflow.com/questions/33840128/parallax-js-and-bootstrap-carousel 
 
    $('img[data-type="img"]').each(function(){ 
 
    // declare the variable to affect the defined data-type 
 
    var $scroll = $(this); 
 
         
 
     $(window).scroll(function() { 
 
     // HTML5 proves useful for helping with creating JS functions! 
 
     // also, negative value because we're scrolling upwards        
 
     var yPos = -($window.scrollTop()/$scroll.data('speed')); 
 
      
 
     // background position 
 
     var coords = yPos +'px'; 
 
    
 
     // move the background 
 
     // $scroll.css({ backgroundPosition: coords }); 
 
     $scroll.css('top', coords); 
 
     }); // end window scroll 
 
    }); // end section function 
 
}); // close out script 
 

 
// this function is for the navbar only 
 
$(document).ready(function(){  
 
    var scroll_start = 0; 
 
    var startchange = $('#startchange'); 
 
    var offset = startchange.offset(); 
 
    if (startchange.length){ 
 
    $(document).scroll(function() { 
 
     scroll_start = $(this).scrollTop(); 
 
     if(scroll_start > offset.top) { 
 
     $(".navbar-default").css('background-color', '#ffffff'); 
 
     } else { 
 
     $('.navbar-default').css('background-color', 'transparent'); 
 
     } 
 
    }); 
 
    } 
 
}); 
 

 
/* Create HTML5 element for IE */ 
 
document.createElement("section");

#home { 
 
     background: url(http://placehold.it/2000x600/0033cc/ffffff) 50% 0 fixed; 
 
     height: auto; 
 
     margin: 0 auto; 
 
     width: 100%; 
 
     position: relative; 
 
     box-shadow: 0 0 50px rgba(0,0,0,0.8); 
 
     padding: 200px 0; 
 
    } 
 
    #content1 { 
 
     background: url(http://placehold.it/2000x600/0033cc/ffffff) no-repeat center center fixed; 
 
     height: auto; 
 
     margin: 0 auto; 
 
     width: 100%; 
 
     position: relative; 
 
     box-shadow: 0 0 50px rgba(0,0,0,0.8); 
 
     padding: 200px 0; 
 
    } 
 
    #about { 
 
     background-color: black; 
 
     height: auto; 
 
     margin: 0 auto; 
 
     width: 100%; 
 
     position: relative; 
 
     box-shadow: 0 0 50px rgba(0,0,0,0.8); 
 
     padding: 100px 0; 
 
     color: #fff; 
 
    } 
 

 
/* Carousel base class */ 
 
.carousel { 
 
    height: 600px; 
 
    margin-bottom: 0; 
 
} 
 
.carousel-caption { 
 
    color: black; 
 
} 
 

 
/* Declare heights because of positioning of img element */ 
 
.carousel .item { 
 
    height: 600px; 
 
    background-color: DimGray; 
 
} 
 
.carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-height: 120%; 
 
    max-width: 120%; 
 
} 
 
@media (max-width: 767px) { 
 
    .carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-height: 120%; 
 
    max-width: 120%; 
 
    } 
 
@media (min-width: 768px) { 
 
    .carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-height: 120%; 
 
    max-width: 120%; 
 
    } 
 
@media (min-width: 992px) { 
 
    .carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-height: 120%; 
 
    max-width: 120%; 
 
    }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Parallax Carousel Demo</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="http://untame.net/2013/04/how-to-integrate-simple-parallax-with-twitter-bootstrap/">source 1</a></li> 
 
     <li><a href="http://www.bootply.com/zylyqLRmcj">source 2</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
<!-- carousel #1 --> 
 
<div id="bsCarouselHome" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-slide-to="0" data-target="#bsCarouselHome" class="active" ></li> 
 
    <li data-slide-to="1" data-target="#bsCarouselHome"></li> 
 
    <li data-slide-to="2" data-target="#bsCarouselHome"></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <img alt="First slide" src="http://placehold.it/1500x800" class="first-slide" data-speed="5" data-type="img"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h3>parallax for img within carousel</h3> 
 
      <hr class="half-rule"> 
 
        <p>Image ratios are somewhat strange when resizing to small viewports because the whole carousel ratio changes too. You have to chose whether respect the size or the ratio.</p> 
 
      <p>This is just proof of concept to show how to apply parallax to img as well, not just backgrounds.</p> 
 

 
      <p><a role="button" href="career" class="btn btn-success btn-lg">Learn more</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img alt="First slide" src="http://placehold.it/1500x1000" class="second-slide" data-speed="5" data-type="img"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h3>parallax for img within carousel</h3> 
 
      <hr class="half-rule"> 
 
      <p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
      <p><a role="button" href="#" class="btn btn-success btn-lg">View smth</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img alt="Second slide" src="http://placehold.it/1500x1000" class="third-slide" data-speed="5" data-type="img"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h3>parallax for img within carousel</h3> 
 
      <p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p> 
 
      <p><a role="button" href="#" class="btn btn-success btn-lg">Learn more</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a data-slide="prev" role="button" href="#bsCarouselHome" class="left carousel-control"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
    <a data-slide="next" role="button" href="#bsCarouselHome" class="right carousel-control"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 
</div> 
 

 

 
<!-- Section #2 --> 
 
<section id="home" data-speed="2" data-type="background"> 
 
    <div class="container"> 
 
    <div class="row-fluid"> 
 
      <div class="col-md-4 well"> 
 
      <h2>Heading</h2> 
 
      <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque cursus nisl consectetur et.</p> 
 
      <p><a class="btn btn-success" href="#">View details &raquo;</a></p> 
 
      </div><!-- /.span4 --> 
 
      <div class="col-md-4"> 
 
      <h2>Heading</h2> 
 
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
 
      <p><a class="btn btn-success" href="#">View details &raquo;</a></p> 
 
      </div><!-- /.span4 --> 
 
      <div class="col-md-4 well"> 
 
      <h2>Heading</h2> 
 
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum odio, dapibus ac in, massa justo sit amet.</p> 
 
      <p><a class="btn btn-success" href="#">View details &raquo;</a></p> 
 
      </div><!-- /.span4 --> 
 
     </div> 
 
    </div> 
 
</section> 
 

 
<!-- Section #3 --> 
 
<section id="about"> 
 
    <div class="container"> 
 
    <div class="page-header"> 
 
     <h1>Final Section Headline <small>Some subtext goes here...</small></h1> 
 
    </div> 
 
    <div class="row-fluid"> 
 
      <div class="span4"> 
 
      <h2>More Details</h2> 
 
      <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque cursus nisl consectetur et.</p> 
 
      <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque cursus nisl consectetur et.</p> 
 
      <p><a class="btn btn-success">View details &raquo;</a></p> 
 
      </div><!-- /.span4 --> 
 
      <div class="span4"> 
 
      <h2>Heading</h2> 
 
      <div class="media"> 
 
      <a class="pull-left" href="#"> 
 
       <img class="media-object" src="images/check.png"> 
 
      </a> 
 
      <div class="media-body"> 
 
       <h4 class="media-heading">Media heading</h4> 
 
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante. 
 
      </div> 
 
     </div> 
 
      <div class="media"> 
 
      <a class="pull-left" href="#"> 
 
       <img class="media-object" src="images/check.png"> 
 
      </a> 
 
      <div class="media-body"> 
 
       <h4 class="media-heading">Media heading</h4> 
 
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante. 
 
      </div> 
 
     </div> 
 
      <div class="media"> 
 
      <a class="pull-left" href="#"> 
 
       <img class="media-object" src="images/check.png"> 
 
      </a> 
 
      <div class="media-body"> 
 
       <h4 class="media-heading">Media heading</h4> 
 
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante. 
 
      </div> 
 
     </div> 
 
      </div><!-- /.span4 --> 
 
      <div class="span4"> 
 
      <h2>Log In</h2> 
 
      <form class="form"> 
 
      <div class="control-group"> 
 
      <label class="control-label" for="inputEmail">Email</label> 
 
      <div class="controls"> 
 
       <input type="text" id="inputEmail" placeholder="Email"> 
 
      </div> 
 
      </div> 
 
      <div class="control-group"> 
 
      <label class="control-label" for="inputPassword">Password</label> 
 
      <div class="controls"> 
 
       <input type="password" id="inputPassword" placeholder="Password"> 
 
      </div> 
 
      </div> 
 
      <div class="control-group"> 
 
      <div class="controls"> 
 
       <label class="checkbox"> 
 
       <input type="checkbox"> Remember me <br><br> 
 
       </label> 
 
       <button type="submit" class="btn btn-success">Sign in</button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
      </div><!-- /.span4 --> 
 
     </div> 
 
    </div> 
 
</section> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>