0

w-1、w-2、w-3 div を左右の矢印で前後にスライドさせたいと思います。ここで負のマージンを使用できるかもしれませんが、JQ には詳しくありません。このように設定された div から始めるべきかどうかはわかりません (左に浮いています)。

html:

    <html>

    <head>

    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
        <meta charset="utf-8" />
        <title>Demo</title>
    </head>
    <body>
       <div id="container">
            <div id="arrows">
                <ul class="button-group">
                     <li><a href="#" class="button">Left</a></li>
                     <li><a href="#" class="button">Right</a></li>
                </ul>       
            </div> 
            <div id="windows">
                <div id="w-1" class="w">

                </div>
                <div id="w-2" class="w">

                </div> 
                <div id="w-3" class="w">

                </div> 
            </div>      
       </div> 
    </body>
    </html>

CSS:

  body {
            padding: 20px;
    }
    #container {
            width: 800px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
            background-color: #EAEAEA;
    }
    #arrows {
            width: 100%;
            height: 100px;
            background-color: #888888;
    }
    #arrows a {
            color: white;
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
    }
    #windows {
            width: 100%;
            height: 80%;
            background-color: #EAEAEA;
            padding: 50px 0;
            overflow: hidden;
            position: relative;
    }
    .w {
            width: 100%;
            height: 400px;
            margin-bottom: 50px;
    }
    #w-1 {
            background-color: red;
    }
    #w-2 {
            background-color: blue;
    }
    #w-3 {
            background-color: green;
    }

ありがとう！

4

1 に答える 1