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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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 () - 8 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 () - 8 years ago - Reply 0


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

IvanRostov () - 8 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 () - 8 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 () - 8 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 () - 8 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 () - 8 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 () - 8 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 () - 9 years ago - Reply 0


Awessome

Donald Genes () - 9 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 () - 10 years ago - Reply 0


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

dhevan muhamad () - 10 years ago - Reply 0


Not work stuck on
slide 1

dhevan muhamad () - 10 years ago - Reply 0


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

Yurnero Omnislash () - 10 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 () - 10 years ago - Reply 0


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

maxsurguy () - 10 years ago - Reply 0


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

Ale Arketipi () - 10 years ago - Reply 0


It is in the HTML, not in CSS

maxsurguy () - 10 years ago - Reply 0


thank you for your help

Ale Arketipi () - 10 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 () - 10 years ago - Reply 0


Good Morning

Dragon () - 10 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 () - 10 years ago - Reply 0


thanx for thinking about workers...

sid () - 10 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 () - 10 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 () - 10 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 () - 10 years ago - Reply 0


Ali Zamani () - 10 years ago - Reply 0


what a great resource thanks for sharing

Brian van Vlymen () - 10 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 () - 10 years ago - Reply 0


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

Anurag Malhotra () - 10 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 () - 8 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 () - 10 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 () - 10 years ago - Reply 0


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

Mirchu () - 10 years ago - Reply 0