javascript - div を CSS と並べて配置する際の問題

Question

stackoverflow に関するいくつかの投稿を読んだ後、div を並べて配置するためにいくつかのことを試みましたが、何も成功しませんでした。これまでCSSを重要な方法で使用したことがないため、苦労しています。

ページの右端からスライドインしたいスライドアウトがあります。スライダーの左端には、スライダーを閉じることができる div (以下のコードでは clickme と呼ばれます) が必要であり、スライダーの右側には、carouFredSel を含む div (以下のコードでは image_carousel と呼ばれます) が含まれます。 .

2 つの問題があります。

1. スライダーがスムーズに出ない。#slideout の遷移 CSS プロパティで見つけることができるすべてを試しましたが、スライダーは右からスライドするのではなく、表示されるだけです。

2. カルーセル (#image_carousel) を含む div が #clickme の右側に配置されていません。左 10% を #clickme で、右 90% を #image_carousel で #slideout したい。#clickme は左側の 10% を占めていますが、#image_carousel はクリックミーの上に配置されており、右側の 90% も占めていません。image_carousel に position = relative がある場合、見た目は少し良くなりますが、まだ正しくありません。

これがコードです。carouFredSel のものは、彼らの Web サイトの例からコピーしました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.carouFredSel-6.2.1.js"></script>

<style type="text/css">

    #slideout {
        position: absolute;
        top: 37%;
        right: -360px;
        width: 400px;
        min-height: 25%;
                  /* tried transform instead of width but no difference */
        transition: width 0.3s ease;
        -webkit-transition: width 0.3s ease;
        -moz-transition: width 0.3s ease;
        -ms-transition: width 0.3s ease;
        -o-transition: width 0.3s ease;
        overflow: auto;
        background: #34cbcb;
        -webkit-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
        -moz-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
        box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
    }
    .slide-away {
        transform: translate(-360px, 0);
        -webkit-transform: translate(-360px, 0);
        -moz-transform: translate(-360px, 0);
        -ms-transform: translate(-360px, 0);
        -o-transform: translate(-360px, 0);
    }

    #clickme {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 10%;
        float: left;
        background: #870C7E;
    }

</style>

<style type="text/css">

    .image_carousel {
        /* padding: 15px 0 15px 40px; */
        position: relative;

        margin-left: 10%;
    }
    .image_carousel img {
        border: 1px solid #ccc;
        background-color: white;
        padding: 9px;
        margin: 7px;
        display: block;
        float: left;
    }
    a.prev, a.next {
        background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) no-repeat transparent;
        width: 45px;
        height: 50px;
        display: block;
        position: absolute;
        top: 85px;
    }
    a.prev {            left: -22px;
                        background-position: 0 0; }
    a.prev:hover {      background-position: 0 -50px; }
    a.prev.disabled {   background-position: 0 -100px !important;  }
    a.next {            right: -22px;
                        background-position: -50px 0; }
    a.next:hover {      background-position: -50px -50px; }
    a.next.disabled {   background-position: -50px -100px !important;  }
    a.prev.disabled, a.next.disabled {
        cursor: default;
    }
    a.prev span, a.next span {
        display: none;
    }
    .pagination {
        text-align: center;
    }
    .pagination a {
        background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
        width: 15px;
        height: 15px;
        margin: 0 5px 0 0;
        display: inline-block;
    }
    .pagination a.selected {
        background-position: -25px -300px;
        cursor: default;
    }
    .pagination a span {
        display: none;
    }
    .clearfix {
        float: none;
        clear: both;
    }

</style>


<script>

$('#clickme').click(function() {
    $('#slideout').toggleClass('slide-away');
});

</script>

<div id="slideout">

    <div id="clickme">
        <img id="direction" class="chevron" src="left.PNG"/>
    </div>

    <div class="image_carousel">

        <div id="foo2">
            <img src="image1.bmp" alt="" width="60" height="60" />
            <img src="image2.bmp" alt="" width="60" height="60" />
            <img src="image3.bmp" alt="" width="60" height="60" />
            <img src="image4.bmp" alt="" width="60" height="60" />
            <img src="image5.jpg" alt="" width="60" height="60" />
            <img src="image6.jpg" alt="" width="60" height="60" />
        </div>

        <div class="clearfix"></div>

        <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
        <a class="next" id="foo2_next" href="#"><span>next</span></a>

        <div class="pagination" id="foo2_pag"></div>

    </div>

</div>

<script>

    $("#foo2").carouFredSel({
        circular: false,
        infinite: false,
        auto    : false,
        prev    : {
            button  : "#foo2_prev",
            key     : "left"
        },
        next    : {
            button  : "#foo2_next",
            key     : "right"
        },
        pagination  : "#foo2_pag"
    });

    $(function () {

        $("#slideout").hide();

        setTimeout(function(){
              $("#slideout").show();
              $("#direction").attr("src","right.PNG");
              $('#slideout').toggleClass('slide-away');
        },3000);
    });

 </script>

ありがとう、

ポール