Bootstrap carousel

Szerző:   |   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ó

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
}

30 hozzászólás

  1. 2018. november 5. hétfő - 21:41

    Kedves Tamás!
    Ha a carousel-t szeretném eltüntetni XS méretben, akkor a video alapján a
    “” sorba kell beírni az új szabályok szerint a “hidden xs” helyett, hogy “d-xs-block”, ha jól értelmezem?
    Bár nem biztos, mert így nem működik.
    Mit ronthattam el?
    Köszi, ha tudsz válaszolni.

    • 2018. november 23. péntek - 22:25

      Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block

  2. 2018. szeptember 28. péntek - 18:41

    Szia Tamás,

    Most vettem észre, hogy nálam az utolsó képről az elsőre ugorva – és visszafelé is – mindig bennemarad az utolsó képből egy jó nagy darab, majd egy villanással eltűnik. Fordított esetnél pedig rögtön előugrik egy része és csak utána kúszik be a többi. Széttúrtam már a kódokat, de egyelőre semmi nem találtam. Van valami ötleted hol keresgéljek?
    Köszönettel

  3. 2018. augusztus 21. kedd - 21:48

    Hali. Nekem annyi kérdésem lenne, hogy hogyan lehet azt megcsinálni, mint néhány oldalnál van, hogy van egy kép például, és nem lehet jobbclickelni rá, és nem lehet letölteni közvetlenül? A jobb click -> view image letiltására gondolok. Nem csak carouselnél, hanem bármelyik képnél, vagy pl galériánál értem. Azt tudom, hogy ettől még ugyan úgy le lehet tölteni a konzolból, viszont ezt kérték tőlem hogy tiltsam le.

  4. 2018. július 11. szerda - 15:59

    Üdv. Azt szeretném elérni, hogy a képek a monitorhoz igazodva 100%-os szélességűek legyenek a carouselben, viszont ha beállítom a képekre a 100%-os width-et, a carouselnek az árnyéka túl lóg a képen alul, ahogy először neked is volt a videóban. Aztán ezt azzal fixáltad, hogy a carouselnek megadtál egy fix magasságot. Az én esetemben viszont ezt nem lehet, mert a magassága is változik a képnek, ha az ablak mérete változik a 100%-os width miatt. Mit tudnék csinálni?

    • 2018. július 11. szerda - 16:12

      Nem emlékszem már, nagyon régen használtam Bootstrap Carousel-t, viszont a dokumentáció oldalán jónak tűnik, onnan ki tudod másolni: https://getbootstrap.com/docs/4.0/components/carousel/
      Mondjuk ez az újabb 4-es verzió.

    • 2018. július 11. szerda - 17:02

      Köszi. És itt sem lehet külön csak a carousel komponest letölteni? Egybe le kell szednem a bootstrapet hozzá?

    • 2018. július 11. szerda - 18:37

      Sikerült megcsinálni a komponensekkel együtt. 🙂 Köszi.

  5. 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?

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

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

    • 2018. február 1. csütörtök - 12:01

      Szia Tamás,

      Nekem sem akar működni a carousel-es banner. Egymás alá bepakolja a képeket miután átnevezem c1-2-3-ra ahogy mutatod. Az oldal alján a js-re hivatkozás úgy van mint nálad. A bootstrap.js és a jquery.js is ugyanabban a folderben vannak. Találtam még 2 carousel.js-t is a kompletten letöltött bootstrap strukiban de az sem segít ha azokat meghivatkozom… A bootstrapből css-ből nem ollóztam ki semmit hagytam a full gyári paramétereket benne.

      Van ötleted esetleg?

    • 2018. február 1. csütörtök - 17:18

      Ez a carousel amit bemutattam a Bootstrap 3 évvel ezelőtti verziójában volt. Azóta gondolom már ezer dolgon változtattak, ezért az aktuális verziójú Bootstrap-hez már nem használható ez az anyag.

    • 2018. február 1. csütörtök - 16:52

      Szia Tamás,

      A problémát hogy ugrált az egymás után következő zöld bannerképek magassága, plusz kitöltse a container-t így sikerült végül áthidalni:

      Ezt class-ként az <img tag-be szúrtam be

      .imgcarousel{
      width: 100%;
      height: 300px;
      }

      .carousel-main {
      height: 300px;
      }

      A video végén mondod hogy nem érdemes leszedni a komplett bootstrapet csak azokat a komponeneseket amire szükségünk van. a V 3-nál még volt ez a customize menü, de a V4-nél kivették ha jól látom. Így akkor csak az marad hogy letöltés után kitörlöm ami nem kell?

      Végül a carousel-indicators-höz is keleltt nyúlni a V4-nél mert bogyók helyett kockák lettek, kell a radius is:

      .carousel-indicators .active {
      margin: 1px 5px;
      width: 15px;
      height: 15px;
      border-radius:15px;
      }

    • 2018. február 1. csütörtök - 17:16

      A 4-eshez nincsen webes compiler. Vagy letöltöd a source állományokat és SASS compiler-rel összeraksz egy pakkot azokból a komponensekből amikre szükséged van, vagy letöltöd a teljes build-et, és kitörlöd belőle amikre nincs szükséged. Az első megoldás ajánlott, ha kimondottan Bootstrap sablont készítesz kevés változtatással a gyári elemeken.

      Ha csak néhány komponens kell, például a grid, akkor azt külön is le tudod tölteni. Én a grid-en kívül semmit nem szoktam használni a Bootstrap-ből.

  6. 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”…

    • 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.

  7. 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

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

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

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

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

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

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

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

    Jó lett az új weboldal! 😉

  10. 2015. január 20. kedd - 16:41

    Szia!

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

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

  11. 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.

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

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

  12. 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?

    • 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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • HTML5 + CSS3 menü

    Ki az a Sanyi?...

  • Scrollbar színezgetés CSS-sel

    Köszi a választ. Igen, egyébként azt használtam, amit először küldtél, és azzal állt fent az említett probléma. Már váltottam plugint azóta, és már me...

  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...