"Responsive bs-carousel with hero headers"
Bootstrap 3.2.0 Snippet by maridlcrmn

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <!-- Overlay --> <div class="overlay"></div> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> <li data-target="#bs-carousel" data-slide-to="1"></li> <li data-target="#bs-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item slides active"> <div class="slide-1"></div> <div class="hero"> <hgroup> <h1>We are creative</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> <div class="item slides"> <div class="slide-2"></div> <div class="hero"> <hgroup> <h1>We are smart</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> <div class="item slides"> <div class="slide-3"></div> <div class="hero"> <hgroup> <h1>We are amazing</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> </div> </div>
/* Fade content bs-carousel with hero headers Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com Image credits: unsplash.com */ /********************************/ /* Fade Bs-carousel */ /********************************/ .fade-carousel { position: relative; height: 100vh; } .fade-carousel .carousel-inner .item { height: 100vh; } .fade-carousel .carousel-indicators > li { margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active { width: 10px; height: 10px; opacity: 1; } /********************************/ /* Hero Headers */ /********************************/ .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 6em; font-weight: bold; margin: 0; padding: 0; } .fade-carousel .carousel-inner .item .hero { opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .item.active .hero { opacity: 1; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } /********************************/ /* Overlay */ /********************************/ .overlay { position: absolute; width: 100%; height: 100%; z-index: 2; background-color: #080d15; opacity: .7; } /********************************/ /* Custom Buttons */ /********************************/ .btn.btn-lg {padding: 10px 40px;} .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus { color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } /********************************/ /* Slides backgrounds */ /********************************/ .fade-carousel .slides .slide-1, .fade-carousel .slides .slide-2, .fade-carousel .slides .slide-3 { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .slides .slide-1 { background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); } .fade-carousel .slides .slide-2 { background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af); } .fade-carousel .slides .slide-3 { background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327); } /********************************/ /* Media Queries */ /********************************/ @media screen and (min-width: 980px){ .hero { width: 980px; } } @media screen and (max-width: 640px){ .hero h1 { font-size: 4em; } }

Related: See More


Questions / Comments:

Resimleri net görmek istiyorsanız css içinden .overley etiketini bulup .7 olan değer ile oynayarak değiştirebilirsiniz.

opacity: -3;
örnek :
http://www.7the24.com/velis/

Murat Bal () - 7 years ago - Reply 0


Hello,
How to make the buttons clickable, to a page or to a #.
Thank you

Bonjour,
Comment rendre cliquable les boutons, soi vers une page où vers un #.
Merci

Meegolo () - 7 years ago - Reply 0


change this

<button class="btn btn-hero btn-lg" role="button">See all features</button>

to

See all features

tony black () - 7 years ago - Reply 0


slider working but image is not showing can anyone help

ather () - 7 years ago - Reply 0


What kind of mesurement is this -".fade-carousel .slides .slide-3 {height: 100vh....}"

IvanRostov () - 7 years ago - Reply 0


vh is for "viewport height". so the code keeps the carousel on a full height of your device and will show the content only on scorlling.

Parshu Ram Sharma () - 7 years ago - Reply 0


is there a way to make the carousel background image responsive

Eloryia Ra () - 7 years ago - Reply 0


Example:
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 400px;
max-width:100%;

Дамјан () - 7 years ago - Reply 0


the carousel is not acting as responsive. background image remains large

Eloryia Ra () - 7 years ago - Reply 0


Hi i am having a problem. the script works fine but for some reason the image doesnt start at the top? It is stuck inbetween the menu????

Can anyone please help me.

the link is http://christworkcomics.com...

Can someone help please?

luiz () - 7 years ago - Reply 0


To run the slider insert the jquery-min.css either locally or through CDN

Ashok Pokharel () - 8 years ago - Reply 0


dude jquery-min.css?

Parshu Ram Sharma () - 7 years ago - Reply 0


Check the following GitHub repo and download the working files.
https://github.com/ashokpok...

Ashok Pokharel () - 7 years ago - Reply 0


there doesnt appear to be any jquery-min.css can you please provide more information as to where to retrieve it. Thank you in advance

Eloryia Ra () - 7 years ago - Reply 0


Check the following GitHub repo and download the working files.
https://github.com/ashokpok...
Hope it helps

Ashok Pokharel () - 7 years ago - Reply 0


do you have the actual code for this

Eloryia Ra () - 7 years ago - Reply 0


Is there suppose to be javascript with this to make it move?

narue1992 () - 8 years ago - Reply 0


This is lovely slider.. but some bug :( microsoft edge 20 and safari too .. any fix with that.. ??

yunurir () - 8 years ago - Reply 0


if you change all of the heights that say 100vh to 400px (or some other px) then it looks like it works

Jason McDonald () - 8 years ago - Reply 0


Great carousel! Any idea why the 3 slides would show up just flush on top of each other? Thanks!

Amanda () - 8 years ago - Reply 0


Not working on IE8 , What should be solution?

Abhishek Kushwaha () - 8 years ago - Reply 0


Awessome

Donald Genes () - 8 years ago - Reply 0


also my slider stops on the last slide and does not carry on

Jon Fuller () - 9 years ago - Reply 0


Hopefully a simple answer, it is taking a long time for the initial slide to start, once it has started it is correct and following the 4000 rule

Jon Fuller () - 9 years ago - Reply 0


between slide the background shows. Basically there is no fade-out animation on current slide it just disapears, revealing the background... Any hints on where to go from here?

Thanks

Omar () - 9 years ago - Reply 0


Same thing here - weird thing is it was working fine for me two weeks ago, then just started with this symptom. Any resolution to this?

Daniel Schaeffer () - 8 years ago - Reply 0


Hello,

I have tried the carousel and it works for my bootstrap. However, I would want the only background to be fade in/out instead the contents, the contents should glide not the background. How would I do that? Let me know thanks.

Web Newbie () - 9 years ago - Reply 0


Hello,

I have tried the carousel and it works for my bootstrap. However, I would want the only background to be fade in/out instead the contents, the contents should glide not the background. How would I do that? Let me know thanks.

Web Newbie () - 9 years ago - Reply 0


Hello,

I have tried the carousel and it works for my bootstrap. However, I would want the only background to be fade in/out instead the contents, the contents should glide not the background. How would I do that? Let me know thanks.

Web Newbie () - 9 years ago - Reply 0


Ä°ncredible, thank you bro.

tolgahanuzun () - 9 years ago - Reply 0


I love this slider but I am unable to control it's height ! It fills all
of my page. I surrounded it with a div and gave it a definite height
but it didn't work.
Please let me know how to fix this problem?

Reza () - 9 years ago - Reply 0


Stuck on slide one... Any solution?

Claudio () - 9 years ago - Reply 0


I've tried and cannot get the slides to rotate, I tried using slides on the computer, then on my site, it only shows the first slide and that's all. Manually doesn't work either.
I like the snippet, however I can't get it to work. - using Firefox, tried in IE as well.

Okay-dot-com () - 9 years ago - Reply 0


not working automatic sliding tell me the solution?

suraj vs () - 9 years ago - Reply 0


change your opacity in .overlay according you.... it'll be excellent work :)

uzair () - 9 years ago - Reply 0


not work on me,stuck on slide 1 help me please

Dhevan () - 9 years ago - Reply 0


Help me im stuck on slide 1,the carousel is not work

dhevan muhamad () - 9 years ago - Reply 0


Not work stuck on
slide 1

dhevan muhamad () - 9 years ago - Reply 0


hi how can i add left to right button arrows? thanks

Yurnero Omnislash () - 9 years ago - Reply 0


Hi guys
Could you please let me know how I can control the speed of that carousel
Thank you

Ale Arketipi () - 9 years ago - Reply 0


Yes, you can change data-interval="4000" to number of milliseconds that you want.

maxsurguy () - 9 years ago - Reply 0


sorry MAx but I am newbie, which is the css whit that tag ?

Ale Arketipi () - 9 years ago - Reply 0


It is in the HTML, not in CSS

maxsurguy () - 9 years ago - Reply 0


thank you for your help

Ale Arketipi () - 9 years ago - Reply 0


thank you very much , now I m gonna ask you another thing :) , Why it doesn't automatically start , the sliding action works once if i click it. Thanks for your help

Ale Arketipi () - 9 years ago - Reply 0


Good Morning

Dragon () - 9 years ago - Reply 0


I change
.fade-carousel .slides .slide-1 {
background-image: url (href="img/banner1.jpg");
}
or
.fade-carousel .slides .slide-2 {
background-image: url (img/banner2.jpg");

its dont´work, help me please

Rodrigo de Souza Teixeira () - 9 years ago - Reply 0


thanx for thinking about workers...

sid () - 9 years ago - Reply 0


I am having overlay issues.. after a full shuffle through the carousel, the 2nd slide appears below the main carousel when you scroll down the page. Any ideas? Reproduced in firefox/Chrome

Willy_Goat () - 9 years ago - Reply 0


Hello I would like to know how could you change height:100% reduce to 50% become the images are smaller? anybody know how to do it??? I have tried at .overlay height:50% it does not working at all?

Brian van Vlymen () - 9 years ago - Reply 0


Found at .fade-carousel .slides .slide-1,

.fade-carousel .slides .slide-2,

.fade-carousel .slides .slide-3 {

height: 500px;

I have never seen as 100vh. what is that?

Brian van Vlymen () - 9 years ago - Reply 0


Ali Zamani () - 9 years ago - Reply 0


what a great resource thanks for sharing

Brian van Vlymen () - 9 years ago - Reply 0


To fix the overlay problem, insert the overlay div in each slide div then change the opacity of overlay to a lighter opacity (.7 is dark in my opinion) .3 or .4 works nicely

<div class="item slides active">

<div class="slide-1">

<div class="overlay"></div>

</div>

Steph Green () - 9 years ago - Reply 0


not working in safari please tell me the solution.. its urgent..

Anurag Malhotra () - 9 years ago - Reply 0


The .hero z-index is greater than .overlay but it still keeps under .overlay.
Any clue for it?

Cristiano () - 10 years ago - Reply 0


just move the overlay before the slide.

<div class="overlay"></div>

<div class="slide-1"></div>

<div class="hero">

<hgroup>

<h1>We are creative</h1>

<h3>Get start your next awesome project</h3>

</hgroup>

<button class="btn btn-hero btn-lg" role="button">See all features</button>

</div>

</div>

This worked perfect in my case

Bonjovi Jasz Fojas () - 9 years ago - Reply 0


good. now it's working.. thanx

Priya Jain () - 7 years ago - Reply 0


@bonjovijaszfojas:disqus hi can you tell me the reason how can the problem be solved by moving the overlay before the side? thanks a lot

李晧暐 () - 8 years ago - Reply 0


the same issue :(

Osman Ametov () - 10 years ago - Reply 0


In order for z-index to work, the positioning of the element has to be set
More information can be found here http://webdesign.tutsplus.c...

n0de () - 10 years ago - Reply 0


Changing the overlay z-index(line 78) to -1 helped me, maybe with you too?(it is only with no overlay)

Pi-Nerd () - 9 years ago - Reply 0


The Overlay is not showing anymore in that case.

Gaspard Rosay () - 9 years ago - Reply 0


This is great but I only seem to be able to get it to work with the images included in the snippet. When I try to replace image link with url on local drive or even a web url, the images don't show. Do you know why this might be happening?

hlounsbury () - 10 years ago - Reply 0


Hello, you might want to check the https:// and remove the 's'

Murad Swaleh () - 10 years ago - Reply 0


sahi he might
:)

sid () - 9 years ago - Reply 0


its really nice i will add in my next project :)

Mirchu () - 10 years ago - Reply 0