9

スライダーを手動で進めると、スライダーがページの上部にジャンプします。どうすればこれを防ぐことができますか? 大変助かりました！コードは次のとおりです。

<div class="row">
    <div class="span12"> 
        <script>
            $('.carousel').carousel({
            interval: 4000
            })
        </script>
        <div class="container">
            <div id="myCarousel" class="carousel slide frame"> 
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item"><a href="work.html"><img src="assets/images/slide_psd.jpg" width="1170"  alt="wga"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_wga.jpg" width="1170"  alt="wga"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_ts.jpg" width="1170"  alt="top secret hair"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_baja.jpg" width="1170"  alt="baja"></a></div>
                </div>
                <!-- Carousel nav --> 
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
            </div>
        </div>
        <!-- end cara container--> 
    </div>
    <!-- end span--> 
</div>
<!-- end row-->
4

13 に答える 13

2

この問題を引き起こしている別のページのスムーズなページ ジャンプ スクリプトがあったことが判明しました。custom.js から次のものを移動した後、動作します。

  function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
      && (location.hostname == this.hostname || !this.hostname)
      && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
    if (target) {
      var targetOffset = $target.offset().top;
      $(this).click(function(event) {
        event.preventDefault();
        $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
          location.hash = target;
        });
      });
    }
  }
});

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
      $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
          }
于 2013-08-05T21:28:07.173 に答える
1

HTML アンカーにリンクすると、<div id="myCarousel">Twitter Bootstrap のデフォルトではカルーセルの上部にある場所に相対的になります。タグを使用しているようですので、属性data-が必要だとは思いません。href

これを変える：

<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div>

これに：

<!-- Carousel nav --> 
<a class="carousel-control left" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" data-slide="next">&rsaquo;</a> 
</div>

現在、私はオフィスにいないので、複数のシナリオでテストする時間がありませんでしたが、見た目から、それでも機能し、希望する結果が得られるはずです.

于 2013-08-02T00:30:16.467 に答える
0

href を設定してhref="javascript:void(0)"、これを js のどこかに追加します。

$('.carousel-control.right').click(function(){ $('.carousel').carousel('next')});
$('.carousel-control.left').click(function(){ $('.carousel').carousel('prev')});
于 2013-10-28T17:27:56.493 に答える
0

私はこれの作業文書を設定しようとしました。ジャンプ動作が見えません。マークアップをコピーし、サンプル画像、bootstrap.js、bootstrap-carosel.js、bootstrap.css を追加するだけで、特別なことは何もしませんでした。

http://brandonam.com/bootTest/boot.html

fyi:「#myCarousel」の典型的なブラウザの動作は、ウィンドウのフォーカスを「#myCarousel」とマークされた要素に向けることですが、ブートストラップはデフォルトでこれを防止していると思います。動き回ってはいけません。

于 2013-08-01T23:43:11.583 に答える
0

これにはかなりの時間を費やしましたが、data-target属性の設定やその他の解決策はうまくいきませんでした。ページのスクロールアップ/ジャンプは関係なく発生していました。

これは、各スライドの高さが異なる Bootstrap3 カルーセルで発生するようです。上記の@Fabianのコメントは私たちを助けてくれました。それを見逃した人のために、オーバーフローをカルーセルクラスに追加することは、これを修正するための良いハックです:

@media (min-width: 768px)
{
    #our-carousel
    {
      overflow: hidden;    /* workaround to resolve the page jumping/scrolling up on 
                              smaller screens on auto/manual advancing of 
                              carousel */
    }
}
于 2019-11-23T06:35:53.890 に答える
0

私は同じ問題を抱えていました

私のタグは次のようになりました：

<a class="carousel-control right" data-mixpanel-tracker="Slider Next" data-slide="next" href="#carousel">

タグ内の余分な mix-panel 属性を削除することで解決されました。

<a class="carousel-control right" data-slide="next" href="#carousel">

あなたの問題を解決していないことを残念に思いますが、同様の問題を抱えている他の人を助けるかもしれません.

于 2014-02-02T14:10:12.503 に答える
-1

href="#myCarousel"ウィンドウを探して<a name='myCarousel'></a>、その位置に移動しようとしています。

href をに設定してみてくださいhref="javascript:void(0)"

于 2013-08-02T01:07:04.437 に答える