0

別のページでフクロウのカルーセル 2 を使用しています。どこでも同じcssとjsを使用しました。何らかの理由で、ページを読み込むと、ナビゲーション ボタン (前と次) は常に 24px のインライン スタイルのトップ値を取得します。js または CSS のどこにも 24px のトップ値を宣言したことはありません。

これは私のHTMLです：

<div class="pdf-gallery">
        <p class="headline">Lorem ipsum dolor sit amet, consectetuer</p>

        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=0">
                        <!-- image=2 als Übergabe an die Bildergalerie in der Lightbox; sorgt dafür, dass das richtige Bild geöffnet wird (beginnt mit 0) -->
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=1">
                        <img src="img/content/content.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=2">
                        <img src="img/content/thumbnail.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=3">
                        <img src="img/content/content.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=4">
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=5">
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
    </div>

そして、これはjsでフクロウカルーセルをロードする方法です:

$j('.pdf-gallery').each(function () {
    var $slider = $j(this),
        opts = {
            responsive: {},
            smartSpeed: 800,
            loop: false,
            nav: true,
            navRewind: false,
            navText: ['', ''],
            onInitialized: function () {
                $slider.find('.owl-dots, .owl-nav').wrapAll('<div class="owl-controls">');
            },
            onResized: function () {
                $slider.find('.download .image').setEqualHeight('auto');
                $slider.find('.download .caption').setEqualHeight('auto');
            }
        };

    //Paging-Container
    $slider.find('> div').wrapAll('<div class="wrapper owl-carousel">');

    //responsive definition
    opts.responsive[0] = {items: 1};
    opts.responsive[mediaqueries.maxMobile] = {items: 2};
    opts.responsive[mediaqueries.softTablet] = {items: 3};
    opts.responsive[890] = {items: 4};
    if ($slider.parents('.wide, #full-width').length) {
        opts.responsive[mediaqueries.maxDesktop] = {items: 6};
    }

    if ($j('html').hasClass('lt-ie9')) {
        opts.responsive = false;
        if ($slider.parents('.wide, #full-width').length) {
            opts.items = 4;
        } else {
            opts.items = 3;
        }
    }

    //init
    $slider.find('.wrapper').owlCarousel(opts);
});

そして、前と次のボタンのcssがあります：

.owl-next,
            .owl-prev {
                color: @darkBlue;
                cursor: pointer;
                font-size: 22px;
                position: absolute;
                text-decoration: none;
                top: 2px; }

したがって、ボタンの値は top: 2px にする必要があると思います。しかし、代わりに、常に top: 24px のインライン スタイルを取得し、私の top: 2px 値を上書きします。これはどこかに設定されているデフォルト値ですか？しかし、どこでも同じコードを使用するのはなぜでしょうか?

4

0 に答える 0