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
Related
I'm trying to stop my carousel to auto slide for mobile devices only. I tried to change the data-interval thru js but it's not working for some reason. Any idea how to do it?
Here is my html code for the carousel:
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="img/hero-slide-2.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-3.jpg" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-nighfall.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-1-thrive.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-4d.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->
Try first to remove data-ride="carousel" from html, and then use some custom width that you are happy to disable slider for, something like this: (custom BP var is breakpoint)
// set breakpoint width
var BP = 900;
// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:5000 });
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
if( window.innerWidth < BP ){
$('.carousel').carousel({ interval: false });
} else {
$('.carousel').carousel({ interval: 5000 });
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->
I have index.html with anchors which i want to navigate to different items in houses.html. houses.html has full page carousel slider with 5 items ill paste only 2 of them.So to be clear inside index.html i have anchors which navigate to houses.html like this :
<li><a id="houses-slide-1" >Stark</a></li>
<li><a id="houses-slide-2" >Lannister</a></li>
and jquery for the anchors :
$('#houses-slide-1').click(function(){
/*do something here maybe?*/
window.location.href = 'sl/houses.html';
});
$('#houses-slide-2').click(function(){
/*do something here maybe?*/
window.location.href = 'sl/houses.html';
});
houses.html HTML :
<header id="myCarousel" class="carousel slide">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner" id="slide-one-1">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/ned.jpg');">
<div class="row">
<div class="col-md-5 col-md-offset-2 col-sm-5 col-sm-offset-2 slide-paneli">
<div class="col-md-12 slide-paneli">
<a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
</div>
<h1>...</h1>
<p>...</p>
</div>
</div>
</div>
<div class="carousel-caption">
<h2>Starks</h2>
</div>
</div>
<div class="item" id="slide-two-2">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/cersei.jpg');">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 slide-paneli">
<div class="col-md-12 slide-paneli">
<a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
</div>
<h1>...</h1>
<p>...</p>
<div class="row">
</div>
</div>
</div>
</div>
<div class="carousel-caption">
<h2>Lannister</h2>
</div>
</div>
Change your jQuery to “load” the new page at the ID you want:
$('#houses-slide-1').click(function() {
window.location.href = 'sl/houses.html#slide-one-1';
});
$('#houses-slide-2').click(function() {
window.location.href = 'sl/houses.html#slide-two-2';
});
Of course this is a terrible solution. You will have to update every click handler every time you change the ID of the slides.
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
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;
}
i.e. two carousels in the same location but one is always hidden, with two buttons (anchors?) above to turn either one on:
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
My JS does not appear to be working, this is what I have in my JS file:
var floorsCarousel = document.getElementById("floorsCarousel");
var spaceCarousel = document.getElementById("spaceCarousel");
function floorPlans() {
if (floorsCarousel.style.display==="none") {
floorsCarousel.style.display="inherit";
}
if (spaceCarousel.style.display!=="none") {
spaceCarousel.style.display="none";
}
return false;
}
function spacePlans() {
if (spaceCarousel.style.display==="none") {
spaceCarousel.style.display="inherit";
}
if (floorsCarousel.style.display!=="none") {
floorsCarousel.style.display="none";
}
return false;
}
JSFiddle
I have created a solution for you that does what you need here. I've created "buttons" to toggle which carousel you wish to open and wrapped the carousel's in a div with the attr's id="Car-#" class="Car-toggle"
Html
<div class="row">
<button class="toggleCar" data-for="Car-1">Toggle 1</button>
<button class="toggleCar" data-for="Car-2">Toggle 2</button>
<div class="col-lg-12">
<div id="Car-1" class="Car-toggle">carousel One
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
<div id="Car-2" class="Car-toggle">carousel Two
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript (JQuery since your using bootstrap)
$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
$('.Car-toggle').hide();
$('#'+CarWrapperName).show();
});
//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();