A Bootstrap carousel egy kisméretű, könnyen használható JS komponens, mely ráadásul alapból reszponzív. A léptető nyilaknál glyphicon-ok helyett fontello-t használtam, nekem ez jobban bevált.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


<!DOCTYPE HTML>
<html>
<head>
	<title>Tutorial</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="bootstrap.css" type="text/css">
	<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header class="container-fluid">
	<div class="row">
		<div class="container">
			<div class="row">
				<h1 class="col-sm-4">Website Logo</h1>
				<nav class="col-sm-8">
					<a href="">menu 1</a>
					<a href="">menu 2</a>
					<a href="">menu 3</a>
					<a href="">menu 4</a>
				</nav>
			</div>
		</div>
	</div>
</header>
<div id="myCarousel" class="carousel slide carousel-main hidden-xs" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img src="c1.jpg" alt="First slide">
			<div class="container">
				<div class="carousel-caption">
					<h2>Example headline.</h2>
					<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
				</div>
			</div>
		</div>
		<div class="item">
			<img src="c2.jpg" alt="Second slide">
			<div class="container">
				<div class="carousel-caption">
					<h2>Another example headline.</h2>
					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
				</div>
			</div>
		</div>
		<div class="item">
			<img src="c3.jpg" alt="Third slide">
			<div class="container">
				<div class="carousel-caption">
					<h2>One more for good measure.</h2>
					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
				</div>
			</div>
		</div>
	</div>
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="icon-prev" aria-hidden="true"></span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="icon-next" aria-hidden="true"></span>
	</a>
</div>
<div class="container">
	<div class="row">
		<div class="col-sm-6 col-md-3 col-sm-push-6 col-md-push-3">
			<div class="box">
				<img src="2.jpg" class="img-thumbnail">
				<h2>box 1</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante.</p>
			</div>
		</div>
		<div class="col-sm-6 col-md-3 col-sm-pull-6 col-md-pull-3">
			<div class="box">
				<img src="3.jpg" class="img-thumbnail">
				<h2>box 2</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante.</p>
			</div>
		</div>
		<div class="col-sm-6 col-md-3 col-sm-push-6 col-md-push-3">
			<div class="box">
				<img src="4.jpg" class="img-thumbnail">
				<h2>box 3</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante.</p>
			</div>
		</div>
		<div class="col-sm-6 col-md-3 col-sm-pull-6 col-md-pull-3">
			<div class="box">
				<img src="5.jpg" class="img-thumbnail">
				<h2>box 4</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante.</p>
			</div>
		</div>
	</div>
</div>
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

CSS forráskód


/* icons */
@font-face {
	font-family: 'fontello';
	src: url('font/fontello.eot?44808763');
	src: url('font/fontello.eot?44808763#iefix') format('embedded-opentype'),
	     url('font/fontello.woff?44808763') format('woff'),
	     url('font/fontello.ttf?44808763') format('truetype'),
	     url('font/fontello.svg?44808763#fontello') format('svg');
	font-weight: normal;
	font-style: normal
}
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	font-variant: normal;
	text-transform: none;
	font-size: 50px
} 
.icon-prev:before { content: '\e800' }
.icon-next:before { content: '\e801' }


/* general */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Open Sans';
	font-weight: 400;
	font-size: 13px
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
	text-decoration: none
}


/* header */
header {
	background: #74a20c;
	color: #fff;
	padding: 10px 0;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3)
}
header h1 {
	font-size: 25px;
	font-weight: 700
}
header nav {
	text-align: right
}
header nav a {
	color: #fff;
	margin-left: 15px;
	display: inline-block;
	padding: 10px 15px;
	text-transform: uppercase
}
header nav a:hover {
	background: #537506;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.2)
}
@media(max-width:768px) {
	header h1,
	header nav a {
		text-align: center;
		display: block;
	}
	header nav a {
		background: #537506;
		margin: 0 0 2px 0
	}
	header h1 {
		padding: 0 0 10px 0
	}
}



/* boxes */
.box {
	background: #f4f4f4;
	padding: 20px;
	color: #555;
	margin-top: 30px;
}
.box h2 {
	color: #000;
	font-size: 20px;
	font-weight: 700;
	margin: 10px 0
}


/* carousel */
.carousel-main {
	height: 300px;
}
.carousel-main h2 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 20px 0
}
.carousel-main .carousel-caption {
	padding-bottom: 40px
}
.carousel-indicators .active {
	box-shadow: 2px 2px 2px rgba(0,0,0,0.4)
}
.carousel-indicators li,
.carousel-indicators .active {
	margin: 1px 5px;
	width: 15px;
	height: 15px
}