Bootstrap carousel

2015-01-01

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ó

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
}