Parallax.js和Bootstrap Carousel

Question

我一直试图让这个parallax.js在我的Bootstrap Carousel上工作，好消息是我已经让它很好地工作了，但我不能让旋转木马滑动到下一个图像使用data-image-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

我也在寻找，我找到了来自http://untame.net/2013/04/how-to-integrate-simple-parallax-with-twitter-bootstrap/

的parallax.js的解决方案

我正在使用bootstrap 3.3.7并且我使用jQuery 1.12.x到2.x

进行了测试

只需稍微修改jquery函数，这样它就可以在img而不是background：

上工作

$('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 );

这里的概念证明

＆＃13;

＆＃13;

// 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");

＆＃13;

    #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%;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;