カルーセルにcssカード（例：プライシングカード）を追加する方法

Question

私は約6 cssの価格設定カード/テーブルを変更しました。テーブルは通常通りに配置されますが、最初の行がいっぱいになった後、私はスクロールを左右に連続して、最後に到達した後も、それは私が今

HTMLで持っているもの

再び始まる から始めるべきであると、カルーセル内でそれをしたい（私は3を持っています私のhtmlのカードは、コードがかさばるようにしたいとは思っていませんでしたが、その意味は6です）。

<div class="columns item" > 
    <a href="#" style="text-decoration: none;"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/4.jpg" style=" width: 100%; height: 100%;"> 

    </div> 
    <div class="item-content"> 
     <div class="price average-color" style="background-color: rgb(157, 149, 149);"><span>₦60 MILLION</span></div> 
     <header style="padding:30px; background-color: gray;color: white;"> 
      <h2 style="font-size: 18px; font-weight: 500;">4 Bedroom Terrace Houses</h2> 
      <h3 style="font-size: 14px;opacity: 0.6"><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
             <dt>Bathrooms</dt> 
             <dd>1</dd> 
             <dt>Bedrooms</dt> 
             <dd>4</dd> 
             <dt>Area</dt> 
             <dd>165m<sup>2</sup></dd> 
             <dt>Garages</dt> 
             <dd>1</dd> 
            </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

<div class="columns item"> 
    <a href="#" style="text-decoration: none;"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/2.jpg" style=" width: 100%; height: 100%;"></div> 
    <div class="item-content"> 
     <div class="price average-color" style="background-color: rgb(157, 149, 149);"><span>₦75 MILLION</span></div> 
     <header style="padding:30px; background-color: gray;color: white;"> 
      <h2 style="font-size: 18px; font-weight: 500">4 Bedroom Terrace</h2> 
      <h3 style="font-size: 14px;opacity: 0.6"><i class="fa fa-map-marker "></i> Ikate Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
             <dt>Bathrooms</dt> 
             <dd>1</dd> 
             <dt>Bedrooms</dt> 
             <dd>4</dd> 
             <dt>Area</dt> 
             <dd>165m<sup>2</sup></dd> 
             <dt>Garages</dt> 
             <dd>3</dd> 
            </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

<div class="columns item" > 
    <a href="#" style="text-decoration: none;"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/3.jpg" style=" width: 100%; height: 100%;"></div> 
    <div class="item-content"> 
     <div class="price average-color" style="background-color: rgb(157, 149, 149);"><span>₦100 MILLION</span></div> 
     <header style="padding:30px; background-color: gray;color: white;"> 
      <h2 style="font-size: 18px; font-weight: 500">5 Bedroom Detached House</h2> 
      <h3 style="font-size: 14px;opacity: 0.6"><i class="fa fa-map-marker "></i> Lekki County Home </h3> 
     </header> 
     <footer> 
      <dl> 
             <dt>Bathrooms</dt> 
             <dd>1</dd> 
             <dt>Bedrooms</dt> 
             <dd>5</dd> 
             <dt>Area</dt> 
             <dd>165m<sup>2</sup></dd> 
             <dt>Garages</dt> 
             <dd>1</dd> 
            </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 
    </div>  

とCSS

* { 
     box-sizing: border-box; 
      }   

.columns { 
    float: left; 
    width: 25%; 
    padding: 8px; 
} 

.house { 
    list-style-type: none; 
    border: 1px solid #eee; 
    margin: 0; 
    padding: 0; 
    -webkit-transition: 0.3s; 
    transition: 0.3s; 
    background-color: white; 
} 

.house:hover { 
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) 
} 

.house .header { 

    color: white; 

} 

.house li { 
    border-bottom: 1px solid #eee; 
    padding: 20px; 
    text-align: center; 
} 

.house .grey { 
    background-color: #eee; 
    font-size: 20px; 
} 

.button { 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    padding: 10px 25px; 
    text-align: center; 
    text-decoration: none; 
    font-size: 18px; 
} 

@media only screen and (max-width: 600px) { 
    .columns { 
     width: 100%; 
    } 
} 

.item dl { 
    color: #919191; 
    font-size: 12px; 
    padding: 30px; 
} 

dl { 
    margin-bottom: 0; 
} 

dl { 
    margin-top: 0; 
    margin-bottom: 20px; 
} 

.item dl dd { 
    text-align: right; 
    margin-bottom: 10px; 
} 

dl dd { 
    text-align: right; 
    margin-bottom: 10px; 
} 

dd { 
    margin-left: 0; 
} 

.item dl dt { 
    float: left; 
    font-weight: normal; 
} 

dl dt { 
    float: left; 
} 
.price { 
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); 
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); 

    background-color: #626262; 
    color: #fff; 
    padding: 6px 12px; 
    position: relative; 
    right: 0px; 
    z-index: 1; 
} 

.price:after { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); 
    opacity: 0.3; 
    background-color: #000; 
    content: ""; 
    height: 100%; 
    left: 0; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 1; 
} 

.price span { 
    position: relative; 
    z-index: 2; 
} 
.average-color { 
    -moz-transition: 0.4s; 
    -webkit-transition: 0.4s; 
    transition: 0.4s; 
} 

Answer 1

あなたはjavascriptをせずに、あなたの問題を解決することはできません。だから小さなスクリプトを作成しました：jsfiddle.net（私はjQueryを使用しました）しかし、より使いやすくユーザーフレンドリーなカルーセルを作りたい場合は、イベントとボタンを追加する必要があります。

HTML：

<body> 

<div id="container"> <!-- contains the items --> 

<div class="columns item" > 
    <a href="#"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/4.jpg" alt="img"> 
    </div> 
    <div class="item-content"> 
     <div class="price average-color"><span>₦60 MILLION</span></div> 
     <header> 
      <h2>4 Bedroom Terrace Houses</h2> 
      <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
       <dt>Bathrooms</dt> 
       <dd>1</dd> 
       <dt>Bedrooms</dt> 
       <dd>4</dd> 
       <dt>Area</dt> 
       <dd>165m<sup>2</sup></dd> 
       <dt>Garages</dt> 
       <dd>1</dd> 
       </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

<div class="columns item" > 
    <a href="#"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px"> 
    </div> 
    <div class="item-content"> 
     <div class="price average-color"><span>₦60 MILLION</span></div> 
     <header> 
      <h2>4 Bedroom Terrace Houses</h2> 
      <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
       <dt>Bathrooms</dt> 
       <dd>1</dd> 
       <dt>Bedrooms</dt> 
       <dd>4</dd> 
       <dt>Area</dt> 
       <dd>165m<sup>2</sup></dd> 
       <dt>Garages</dt> 
       <dd>1</dd> 
       </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

<div class="columns item" > 
    <a href="#"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px"> 
    </div> 
    <div class="item-content"> 
     <div class="price average-color"><span>₦60 MILLION</span></div> 
     <header> 
      <h2>4 Bedroom Terrace Houses</h2> 
      <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
       <dt>Bathrooms</dt> 
       <dd>1</dd> 
       <dt>Bedrooms</dt> 
       <dd>4</dd> 
       <dt>Area</dt> 
       <dd>165m<sup>2</sup></dd> 
       <dt>Garages</dt> 
       <dd>1</dd> 
       </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

<div class="columns item" > 
    <a href="#"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px"> 
    </div> 
    <div class="item-content"> 
     <div class="price average-color"><span>₦60 MILLION</span></div> 
     <header> 
      <h2>4 Bedroom Terrace Houses</h2> 
      <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
       <dt>Bathrooms</dt> 
       <dd>1</dd> 
       <dt>Bedrooms</dt> 
       <dd>4</dd> 
       <dt>Area</dt> 
       <dd>165m<sup>2</sup></dd> 
       <dt>Garages</dt> 
       <dd>1</dd> 
       </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

<div class="columns item" > 
    <a href="#"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px"> 
    </div> 
    <div class="item-content"> 
     <div class="price average-color"><span>₦60 MILLION</span></div> 
     <header> 
      <h2>4 Bedroom Terrace Houses</h2> 
      <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
       <dt>Bathrooms</dt> 
       <dd>1</dd> 
       <dt>Bedrooms</dt> 
       <dd>4</dd> 
       <dt>Area</dt> 
       <dd>165m<sup>2</sup></dd> 
       <dt>Garages</dt> 
       <dd>1</dd> 
       </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

<div class="columns item" > 
    <a href="#"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px"> 
    </div> 
    <div class="item-content"> 
     <div class="price average-color"><span>₦60 MILLION</span></div> 
     <header> 
      <h2>4 Bedroom Terrace Houses</h2> 
      <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
       <dt>Bathrooms</dt> 
       <dd>1</dd> 
       <dt>Bedrooms</dt> 
       <dd>4</dd> 
       <dt>Area</dt> 
       <dd>165m<sup>2</sup></dd> 
       <dt>Garages</dt> 
       <dd>1</dd> 
       </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

<div class="columns item" > 
    <a href="#"> 
    <ul class="house"> 
    <div class="header"><img src="img/houses/4.jpg" alt="img" height="200px"> 
    </div> 
    <div class="item-content"> 
     <div class="price average-color"><span>₦60 MILLION</span></div> 
     <header> 
      <h2>4 Bedroom Terrace Houses</h2> 
      <h3><i class="fa fa-map-marker "></i> Romay Gardens Estate, Lekki</h3> 
     </header> 
     <footer> 
      <dl> 
       <dt>Bathrooms</dt> 
       <dd>1</dd> 
       <dt>Bedrooms</dt> 
       <dd>4</dd> 
       <dt>Area</dt> 
       <dd>165m<sup>2</sup></dd> 
       <dt>Garages</dt> 
       <dd>1</dd> 
       </dl> 
     </footer> 
    </div> 
    </ul> 
    </a> 
</div> 

</div> 
</body> 

CSS：

* {box-sizing: border-box;} 
/* class house */ 
.house { 
    list-style-type: none; 
    border: 1px solid #eee; 
    margin: 0; 
    padding: 0; 
    -webkit-transition: 0.3s; 
    transition: 0.3s; 
    background-color: #fff; 
} 
.house:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)} 
.house {color: #fff;} 
.house footer {color: #000;} 
.house li { 
    border-bottom: 1px solid #eee; 
    padding: 20px; 
    text-align: center; 
} 
header {padding:30px; background-color: gray;color: white;} 
h2 {font-size: 18px; font-weight: 500;} 
h3 {font-size: 14px;opacity: 0.6} 
a {text-decoration: none;} 
img {display: block; height: 150px;} 
.price {background-color: rgb(157, 149, 149);} 

/* NEW or EDITED */ 

#container { 
    width: 100%; 
    overflow: hidden; 
    white-space: nowrap; /* no wrap */ 
} 
.columns { 
    display: inline-block; /* arrange colums next to each other */ 
    width: 25%; 
    padding: 8px; 
    white-space: normal; 
} 

JS：SOで

(function (window, document, $, undefined) { 
    $(function() { 
    function slide() { 
     $(".item").first().animate({  // animate margin of first item 
      marginLeft: "-25%"    // 25% is the width of one item 
     }, 4000, "linear", function() { // callback 
      $("#container").append(this); // change order 
      $(this).css("margin-left", 0); // set margin to 0 
      slide();       // loop 
     }); 
     } 
    slide();        // invocation 
    }); 
})(window, document, jQuery);