Mérei Tamás webdesigner

Bootstrap carousel

Szerző:   |   2015-01-01

A carousel komponens használta.

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
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

16 hozzászólás

  1. Gábor
    2016. november 19. szombat - 23:05

    Szia!
    Először is szeretném meg a sok hasznos videót amit feltettél nagy segítség 🙂 Az volna a kérdésem a carousel-el kapcsolatban, hogy a videóban látott folyamatokat végig csináltam, még sem aktiválódnak a képek, nem lehet léptetni őket. Megcsináltam azt is hogy egy az egyben átmásoltam a html-t és a css-t, hozzájuk adtam a bootstrap.css és js-t is. Mi lehet a hiba szerinted?

    • cyrex
      2016. december 19. hétfő - 08:50

      Kb. ezer dolog, legvalószínűbb, hogy nem jó a hivatkozás a JS fájlokra.

  2. Róbert
    2016. február 18. csütörtök - 11:20

    Tamás, egy kérdésem lenne, a carouselben hogyan lehetene azt megoldani, hogy ha az oldal szélessége változik, vagy a képernyő felbontása éppen két határ közt van, akkor a képek maradjanak “középen” és ne balra “igazodjanak”…

    • cyrex
      2016. február 22. hétfő - 21:07

      Itt az oldalon példában nem pont így van megcsinálva? Amúgy meg az a lényeg, hogy 100% szélessége legyen minden képnek a carousel-en belül.

  3. Nagy Zoltán
    2015. április 9. csütörtök - 09:21

    Üdv Tamás,

    Volna egy kérdésem.
    Hogyan tudom megoldani, hogy a carousel-ben lévő képek a kép széléig fussanak ki?
    Ugyanis én konkrét, 1200×400 méretű képeket illesztettem be, mindent pontosan úgy csináltam, ahogy a videóban elhangzik, de a képek a monitor bal széléhez tapadva, jobbról jó egynegyednyi képernyővel rövidebbek.

    Köszönöm,
    Zoli

    • cyrex
      2015. április 14. kedd - 12:08

      Mekkora a felbontásod? Nem lehet, hogy nagyobb, mint a kép szélessége?

  4. KingSearch
    2015. február 8. vasárnap - 14:13

    Mennyi idő alatt raktad össze ezt az új weboldal kinézetett?

    • cyrex
      2015. február 8. vasárnap - 15:24

      Két óra volt kb. Csak a CSS-t módosítottam.

  5. KingSearch
    2015. február 8. vasárnap - 14:09

    Jó lett az új weboldal! 😉

  6. and
    2015. január 20. kedd - 16:41

    Szia!

    Tudnál ajánlani wordpress- hez valami youtube gallery plugint??

    ehhez hasonló kellene http://herbytv.com/

  7. Roland
    2015. január 14. szerda - 16:06

    Szia Tamás!
    Olyankor mi a legegyszerűbb megoldás, ha a képeim mérete, mondjuk egységesen 720px és így a jobbra és balra nyilacska távol a képtől lesz, illetve a kép balra igazítva jelenik meg?
    Én ezeket tettem hozzá:
    .carousel-inner > .item > a > img {
    margin:auto;

    és

    .carousel {
    width:800px;

    Végülis ezzel is úgy tűnik működik, de nem tudom van-e esetleg jobb megoldás? (Így még a nyilakat is igazítani kell.)

    Köszi a választ előre is.

    • cyrex
      2015. január 23. péntek - 22:24

      Igazítani kell a nyilakat, ennyi az egész.

  8. Gábor
    2015. január 7. szerda - 20:10

    Üdv!
    Hasznos tutorial mint mindig, viszont lenne egy nem ide kapcsolódó kérdésem. Tudnál ajánlani webshop cms-t?

    • cyrex
      2015. január 9. péntek - 16:53

      Nem foglalkoztam mostanában ezzel. Nekem anno a Prestashop állt viszonylag jól kézre, és a Magento-val szívtam elég sokat, az nem tetszett.

Hozzászólás

Legújabb hozzászólások