12

index.html

@@ -12,11 +12,12 @@
 		<meta name="author" content="order by mobanxiu.cn" />
 		<link rel="stylesheet" type="text/css" href="/skin/css/bootstrap.css" />
 		<link rel="stylesheet" type="text/css" href="/skin/css/style.css" />
-
+		<link rel="stylesheet" type="text/css" href="/skin/css/flexible-bootstrap-carousel.css" />
+		
 		<script src="/skin/js/jquery-1.8.3.min.js"></script>
 		
 		<script src="/skin/js/commonHttp.js"></script>
-		
+		<script src="/skin/js/flexible-bootstrap-carousel.js"></script>
 		
 		<!--<script src="/skin/js/bootstrap.js"></script>-->
 		
@@ -102,7 +103,7 @@
 						<p class="p2" id="titlec"></p>
 					</div>
 					<div class="ui-homehouse lrlist" data-count-pc="3" data-count-mb="1">
-						<a href="" class="aw l">
+						<!--<a href="" class="aw l">
 							<</a>
 								<a href="" class="aw r">></a>
 								<div class="ct">
@@ -111,7 +112,52 @@
 										
 									</ul>
 									<div class="clearfix"></div>
-								</div>
+								</div>-->
+								<div class="carousel-example">
+			<!-- FLEXIBLE BOOTSTRAP CAROUSEL -->
+			<div id="simple-content-carousel" class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true">
+				
+				<div class="items">
+					<div class="flex-item">
+						<img class="img-responsive" src="images/item1.jpg"/>
+						12
+					</div>
+				
+					<div class="flex-item">
+						<img class="img-responsive" src="images/item2.jpg"/>
+					</div>
+					
+					<div class="flex-item">
+						<img class="img-responsive" src="images/item3.jpg"/>
+					</div>
+					
+					<div class="flex-item">
+						<img class="img-responsive" src="images/item4.jpg"/>
+					</div>
+					
+					<div class="flex-item">
+						<img class="img-responsive" src="images/item5.jpg"/>
+					</div>
+					
+					<div class="flex-item">
+						<img class="img-responsive" src="images/item6.jpg"/>
+					</div>
+				</div>
+				
+				<div class="carousel-inner" role="listbox">
+					
+				</div>
+			
+				<a class="left carousel-control" href="#simple-content-carousel" role="button" data-slide="prev">
+					<span class="fa fa-angle-left" aria-hidden="true"></span>
+					<span class="sr-only">Previous</span>
+				</a>
+				<a class="right carousel-control" href="#simple-content-carousel" role="button" data-slide="next">
+					<span class="fa fa-angle-right" aria-hidden="true"></span>
+					<span class="sr-only">Next</span>
+				</a>
+			</div>
+		</div>
 					</div>
 				</div>
 			</div>

skin/css/flexible-bootstrap-carousel.css

@@ -0,0 +1,14 @@
+/*!
+
+Flexible Bootstrap Carousel v0.4
+
+Copyright (c) 2017 Dan Dev
+
+Released under the MIT license
+https://github.com/DanDevG/flexible-bootstrap-carousel/master/LICENSE.md
+
+*/
+
+.carousel.flexible .items {
+	display: none;
+}

skin/js/flexible-bootstrap-carousel.js

@@ -0,0 +1,126 @@
+/*!
+
+Flexible Bootstrap Carousel v0.4
+
+Copyright (c) 2017 Dan Dev
+
+Released under the MIT license
+https://github.com/DanDevG/flexible-bootstrap-carousel/master/LICENSE.md
+
+*/
+
+
+
+
+
+/* global $ */
+/* global CustomEvent */
+
+$(window).load(function() {
+	$(".carousel").on("aCarouselHasBeenAdjusted", function() {
+		// do something
+	});
+	
+	adjustAllCarousels();
+	
+	$(window).resize(function() {
+		adjustAllCarousels();
+	});
+});
+
+function adjustAllCarousels() {
+	$(".carousel.flexible").each(function() {
+		var items = 0;
+		
+		$(this).find(".items .flex-item").each(function() {
+			items++;
+		});
+		
+		var item_width = ($(window).width() > 991 && $(window).width() < 1200) ? 300 : 319; 
+		
+		adjustCarousel($(this), items, item_width);
+	});
+}
+
+function adjustCarousel(carousel, num_of_items, item_width) {
+	var carousel_width = $(carousel).width();
+	var columns_in_item = Math.floor(carousel_width / item_width);
+	
+	if (columns_in_item > 3)
+	{
+		columns_in_item = 3;
+	}
+	else if (columns_in_item < 1)
+	{
+		columns_in_item = 1;
+	}
+	
+	var number_of_items = Math.ceil(num_of_items / columns_in_item);
+	var $items = $(carousel).find(".items .flex-item");
+	var length_of_$items = $items.length;
+	
+	$(carousel).find(".carousel-inner").html("");
+	
+	var current_item = 0;
+	var number_of_columns = String(Math.round(12 / columns_in_item));
+	
+	for (var i = 0; i < number_of_items; i++)
+	{
+		var item = "<div class='item'><div class='row'>";
+		
+		var j = 0;
+		
+		for ( ; j < columns_in_item; j++)
+		{
+			var item_body = (current_item <= length_of_$items - 1) ? $($items[current_item]).clone().wrap("<p>").parent().html() : "";
+			item += "<div class='col-xs-" + number_of_columns + "'>" + item_body + "</div>";
+			
+			current_item++;
+		}
+		
+		item += "</div></div>";
+		
+		$(carousel).find(".carousel-inner").append(item);
+		
+		if (i == 0)
+		{
+			$(carousel).find(".carousel-inner .item").addClass("active");
+		}
+	}
+	
+	alignItemsInsideACarousel();
+	
+	var theCarousel = document.getElementById($(carousel).attr("id"));
+	theCarouselHasBeenAdjusted(theCarousel);
+}
+
+function alignItemsInsideACarousel() {
+	$(".carousel").each(function() {
+		$(this).find(".carousel-inner .item").each(function() {
+			var $items = $(this).children(".row").children("[class^='col-xs']");
+			
+			var number_of_items = $items.length;
+		
+			switch (number_of_items) {
+				case 1:
+					$items.eq(0).addClass("center");
+					break;
+				case 2:
+					$items.eq(0).addClass("left");
+					$items.eq(1).addClass("right");
+					break;
+				case 3:
+					$items.eq(0).addClass("left");
+					$items.eq(1).addClass("center");
+					$items.eq(2).addClass("right");
+			}
+		});
+		
+	});
+}
+
+function theCarouselHasBeenAdjusted(carousel) {
+	var evt = new CustomEvent("aCarouselHasBeenAdjusted", {});
+	
+	carousel.dispatchEvent(evt);
+}