Console is showing every element is where its supposed to be but the is just not showing anything, its like everything has gone under a white blanket,i never seen this kind of problem and have no clue what it might be. strange thing is not even images are showing up
here is the code bootstrap carousel
<!--read-anywhere starts -->
<section class="read-anywhere page" id="read-anywhere">
<div class="container">
<div class="row">
<div class="main-heading clearfix">
<div class="col-md-12 text-center">
<h1 class="text-center">Carousel</h1>
<h2 class="text-center">Carousel sub title.</h2>
</div>
</div>
<div class="col-md-12">
<div id="read-anywhere-slider" class="carousel fade" data-ride="carousel" data-interval="3000">
<div class="row">
<!-- Indicators -->
<div class="col-md-6">
<ol class="carousel-indicators">
<li data-target="#read-anywhere-slider" data-slide-to="0" class="mobile active">
<img src="http://lorempixel.com/300/500/" width="30px"> mobile
</li>
<li data-target="#read-anywhere-slider" data-slide-to="1" class="kindle">
<img src="http://lorempixel.com/300/500/" width="35px"> kindle
</li>
<li data-target="#read-anywhere-slider" data-slide-to="2" class="tablet">
<img src="http://lorempixel.com/300/500/" width="35px"> tablet
</li>
<li data-target="#read-anywhere-slider" data-slide-to="3" class="laptop">
<img src="http://lorempixel.com/300/500/" width="45px"> laptop
</li>
</ol>
</div>
<div class="col-md-6">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/300/500/" class="read-ipad">
</div>
<div class="item">
<img src="http://lorempixel.com/300/500/" class="read-laptop">
</div>
<div class="item">
<img src="http://lorempixel.com/300/500/" class="read-iphone">
</div>
<div class="item">
<img src="http://lorempixel.com/300/500/" class="read-kindle">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--read-anywhere ends -->
Your HTML code contains a couple of mistakes.
Your current code looks like this (in Emmet style):
.col-md-12 > .carousel > .row > .col-md-6 + .col-md-6 > .carousel-inner
By the way, in this case you don't need .col-md-12 at all. So the final HTML structure will look this:
.container > .row > .col-md-6 + .col-md-6 > .carousel > .carousel inner
The second mistake is .fade class on .carousel. By default, bootstrap can't do fade animations for carousels. The fade class will work only with a modal component. Default carousel behaviour is sliding. So you need to add the .slide class to your .carousel element.
If you want to get fade effects, you can try someone's snippets like in this codepen.
Disclaimer: I'm not quite familiar with carousel.js, but I changed this:
class="carousel fade"
into:
class="carousel slide"
And that makes at least the sliding pictures appear.
Kindly check this [jsfiddle][1]
May be it's helpful to you
Related
I've put together this slider w/bootstrap and some javascript taken/adjusted from other places and it's all looking fine except I want to get rid of the little transition/animation that happens when the caption changes.
It looks like the captions sort of slide in/out but I just want them to immediately appear/disappear. I'm afraid it might be something in the bootstrap javascript but I'm not sure how to fix it.
HTML:
<div class="container">
<div data-ride="carousel" class="carousel slide" data-interval="false" id="carousel-1">
<div class="carousel-inner">
<div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
<div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
<div class="carousel-item active"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
</div>
<div><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="sr-only">Next</span></div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2" class="active"></li>
</ol>
</div>
<div id="slider-captions">
<div>
<div id="caption-0" class="pp-carousel-caption">
<p>Paragraph 1</p>
</div>
<div id="caption-1" class="pp-carousel-caption">
<p>Paragraph 2</p>
</div>
<div id="caption-2" class="pp-carousel-caption">
<p>Paragraph 3</p>
</div>
</div>
</div>
javascript:
$("#carousel-1").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider-captions .pp-carousel-caption:not(#caption-'+step+')').hide( function() {
$('#caption-'+step).show();
});
});
CSS:
.pp-carousel-caption:not(#caption-0) {
display: none;
}
.pp-carousel-caption:not(#caption-0) {
display: none;
}
You can set the duration to 0 with the first parameter, the default value is 400.
$('#slider-captions .pp-carousel-caption:not(#caption-'+step+')').hide(0, function() {
$('#caption-'+step).show(0);
});
https://api.jquery.com/show/#show-duration-complete
https://api.jquery.com/hide/#hide-duration-complete
I have a slider on a page, I need the link in that slider to send it to another page with a specific tab open.
I tried to use # 1 at the end of the link however it does not work.
I think i have to use some js to do this, have to put active class on tab and remove the active from first tab. And they will have several sliders that will send to that same page with another open tab.
SLIDER
<div class="container-fluid">
<div class="row text-center my-3">
<div class="row mx-auto my-auto central_slider_prod">
<div id="recipeCarousel" class="carousel slide w-100 tamanho_carousel" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<img class="img-fluid" src="test1.jpg" /><span>Test 1</span>
</div>
<div class="carousel-item">
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
TABS
<div id="exTab2" class="container alinha-tab">
<ul class="nav nav-tabs">
<li class="bt_prod_1">
<a id="bt_prod_2" class="active" href="#1" data-toggle="tab">
Test 1
</a>
</li>
<li class="bt_prod_1">
<a id="bt_prod_3" href="#2" data-toggle="tab">
Test 2
</a>
</li>
</ul>
<div class="tab-content">
<!-- TAB #1 -->
<div class="tab-pane active" id="1">
<div class="container-fluid">
<div class="row">
Test 1
</div>
</div>
</div>
<!-- TAB #2 -->
<div class="tab-pane" id="2">
<div class="container-fluid">
<div class="row">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
To open a new tab you add target="_blank" to your anchor link
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
Try this in your js if you use jquery:
$(window.location.hash).tab('show');
I'm trying to display a canvas, specifically a Granim.js canvas, between a Div background image and the other contents of the Div.
So, there would be a background image, then the Granim.js canvas with the opacity turned down on top of that and then text, gallery, button etc. on top of that.
Here is the code for the Div I'm working with:
<section class="bg-image" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="container" id="carousel">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Portfolio</h2>
<hr class="light">
<p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/gallery/bg2.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>UI/UX Design for Web & Mobile</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg3.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Online Advertising</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg4.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Corporate Identity & Branding</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
<!-- End Carousel Card -->
<hr class="invis">
Visit Portfolio
</div>
</div>
</div>
</div>
</div>
</section>
CSS for div with bg image:
.bg-image {
color: #fff;
background-image: url(../img/portfolio_bg2.jpg);
background-position: center;
}
and here is the code to add the canvas:
<canvas id="granim-canvas"></canvas>
The canvas does work in isolation elsewhere on the page so there's no problem there. It's just layering things the way I want to that's the issue.
Here's the code for the Granim.js canvas just in case it helps:
## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [0.7, 0.7],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>
I am trying to make a carousel on my website, so that it will automatically change four pictures around. Here is my code, however I am stuck in trying to figure out why it wont change any of the pictures:
<div class="carousel">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$('#homeCarousel').carousel({
interval:3000,
pause: "false"
});
});
</script>
<!-- Carousel start -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<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>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="images/l1.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img src="images/l2.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<img src="images/l3.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
<!-- Carousel end -->
</div>
I have tried doing changing the interval times, reformatting everything, checking out different post however I just cannot seem to figure it out.
Any idea what could be the problem?
Just to clarify, the bootstrap carousel is heavily dependent on bootstrap CSS. You don't have it in your post, so make sure you have that reference in your page.
After that, your issue is in your <li data-target="#myCarousel"... lines. Those need to reference your carousel div, so they should have data-target="#homeCarousel"
Once I fixed that your code worked for me.
I make a code for sticking navbar at top position when i scroll down. But the problem is now when i scroll down the set fixed at top as i code. But the images which is following that navbar that hides navbar.
BEFORE SCROLLING
AFTER Scrolling
Lets see my code
<div class="container">
<h1>Mohamed faisal</h1>
<p>Welcome to home page</p>
</div>
<div class="row" id="rows" >
<div class="col-md-2 home" align="center" >Home</div>
<div class="col-md-2 about" align="center">Department</div>
<div class="col-md-2 home" align="center">Applications</div>
<div class="col-md-2 about" align="center">Technologies</div>
<div class="col-md-2 home" align="center">About us</div>
<div class="col-md-2 about" align="center">Help</div>
</div>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="f1.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="f2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="f3.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="f4.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
$("document").ready(function ($) {
var offsets = document.getElementById('rows').getBoundingClientRect();
var topoffsets = offsets.top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > topoffsets) {
$("#rows").css({ top: 0, position: 'fixed' });
} else {
$("#rows").css({ top: '', position: '' });
}
});
});
You should be able to fix this with a z-index on your navbar div. Add another class to your navigation div.
<div class="row navbar" id="rows" >
<div class="col-md-2 home" align="center" >Home</div>
<div class="col-md-2 about" align="center">Department</div>
<div class="col-md-2 home" align="center">Applications</div>
<div class="col-md-2 about" align="center">Technologies</div>
<div class="col-md-2 home" align="center">About us</div>
<div class="col-md-2 about" align="center">Help</div>
</div>
Then add the class to your css with a z-index of 99999.
.navbar {
z-index: 99999;
}
You need to use z-index to up the navbar layer.
.navbarclass {
z-index: 9999;
}
Assuming that div#rows is your header here. You can apply z-index. I don't recommend the idea of 99999999 when dealing with large amount of z-index'd elements on the page. you may need to increase according to the slider's index; inspect the slider's z-index property
#rows {
z-index: 1004;
}
Try using z-index css property with high value on your navbar div.
Code
.navbar {
z-index: 99999 !important;
}