1

[Roundabout][1] を Wordpress インストールにロードしました。目標は、カルーセルとして投稿をめくることができるようにすることです。機能的に言​​えば、すべてがうまくいきます。ただし、ポジショニングに関していくつかの本当の問題に直面しています。

Roundabout は子要素に position:absolute を適用して、カルーセル内での配置を容易にしているようです。これはすべてうまくいっていますが、ページの流れから要素を引き出す絶対配置に関する古典的な問題があり、本体の高さが短くなり、要素がその上と外側に浮いていることを除いて.

親チェーンのいくつかのレイヤーを position:relative に設定しようとしましたが、役に立ちませんでした。私は正直なところアイデアがありません。

私はローカルで作業しています。それ以外の場合は、実際の例へのリンクを提供します。それが必要になった場合は、プロジェクトを実際の例に移動します。

みんな、ありがとう

私のラウンドアバウトコード:

$(document).ready(function() {
                $('#main').roundabout({
                    childSelector:".post",
                    enableDrag: true,
                    autoplay: false,
                    duration: 1000,
                    clickToFocus: true,
                    shape: "square",
                    debug: false
                });
             });

私の基本的な HTML 構造:

    <div id="content">
    <div id="inner-content">
        <div id="main">
            <article class="post">
                Wordpress Content
            </article>
            <article class="post">
                Wordpress Content
            </article>
            <article class="post">
                Wordpress Content
            </article>
        </div>
    </div>
</div>

適切な CSS:

#content {
  margin-top: 1.5em;
}
#content #inner-content {
  background-color: #FFFFFF;
  padding: 0 20px;
  position: relative;
}
#content #inner-content #main {
  margin: 25px auto;
  width: 85%;
}
#content #inner-content #main .roundabout-holder {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 5em;
  width: 100%;
}
#content #inner-content #main .roundabout-moveable-item {
  height: 4em;
  width: 85%;
  cursor: pointer;
  background-color: #ccc;
  border: 1px solid #999;
  margin: 20px 0;
}
#content #inner-content #main .roundabout-in-focus {
  cursor: auto;
}

そして、適切な手段としてスクリーンショットを撮ってみませんか?

4

1 に答える 1

0

You have the height of #content #inner-content #main set to 5em; Set it using min-height and making the value the minimum required for the carousel to show in the body frame. The content should make it grow from there.

Some of the carousels also require some offset padding to accommodate for the forward, backward and frame controls. Check the documentation carefully for anything like that

#content #inner-content #main {
  min-height: 500px; /* or whatever value is required */
}

EDIT 3/3/13:

I am adding a link for you to the standard implementation of Roundabout. Take a look at the HTML vs what you are doing. His plugin is list driven <li> and that's what you should be using as well. You'll probably need to adjust your CSS a little bit afterwards but no big deal there. Just remember if you use someone's plugin that it needs to be setup like the examples they provide for you. If you have issues from that point then it will be much easier to address.

<ul>
    <li>
        <article class="post">
        Wordpress Content
        </article>
    </li>
    <li>
        <article class="post">
        Wordpress Content
        </article>
    </li>
    <li>
        <article class="post">
        Wordpress Content
        </article>
    </li>
</ul>
于 2013-03-03T01:00:04.960 に答える