I'm quite confused as to why my page or my carousel moves up whenever I click it the first time? Here is my code, I got it from Bootstrap.
#tips #carousel-example {
margin: auto;
width: 900px;
}
#tips {
background-color: #fcb595;
max-height: 100%;
}
<div id="tips">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
<li data-target="#carousel-example" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/tips/tip1.jpg" />
</div>
<div class="item">
<img src="images/tips/tip1.jpg" />
</div>
<div class="item">
<img src="images/tips/tip1.jpg" />
</div>
<div class="item">
<img src="images/tips/tip1.jpg" />
</div>
<div class="item">
<img src="images/tips/tip1.jpg" />
</div>
</div>
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
And here is a gif to show what I mean:
Try replacing the href in the controls with data-target :
<a class="left carousel-control" data-target="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-target="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
I found this question today and though it's late I'm going to answer it for future visitors.
Most of the developers use some script to animate to the target element like I also did it. The same issue I can see in your animated image.
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
//... some logic
// eg.
$('html, body').animate({
scrollTop: $(this).offset().top - 100
}, 1000, 'swing');
});
This is what the reason of issue with the carousel click. So, to avoid such issue, you can simply return the click if is on carousel control:
$('a[href^="#"]').on('click', function(e) {
if ($(this).data('slide')) return;
e.preventDefault();
});
Related
I am building a basic "tribute website" for the first of the "Basic Front End Development Projects" in the freecodeCamp.org pipeline. I want to add a gallery that could be clicked through on the page, but after following the w3schools guide and doing about 2 hours of research, I can't find a single discrepancy between my code and what works for others. It may be possible that it only isn't working in the CodePen editor, but when I open a direct link to the page, the issues still occur.
<!-- Carousel Images -->
<div id="myCarousel" class="carousel slide container well" data-ride="carousel">
<!-- Slide Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!-- to s-->`
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Images (add alts)-->
<div class="carousel-inner" role="listbox"> <!-- role="listbox" -->
<div id="img1" class="item active">
<img src="...">
</div>
<div id="img2" class="item">
<img src="...">
</div>
<div id="img3" class="item">
<img src="...">
</div>
<!-- pointers -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span id="leftArrow" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span id="rightArrow" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
CodePen link: here
Thanks!!!
My slider isn't sliding and when I click on any buttons to change image it does not work. I am guessing this is something to with jQuery or the bootstrap.js file. Here is my HTML code
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="party.png" alt="Slide 1">
</div>
<div class="item">
<img src="party2.png" alt="Slide 2">
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
At the bottom of my page I have the JavaScript files. They look like this.
<script src="./js/jquery.js"></script>
I checked and the file paths are correct. Btw I am using Electron and not a plain browser. I don't think it makes a difference but just keep it in mind. Thanks! ;)
I'm trying to link to different slides in a bootstrap carousel from another page with no results.
Something like this:
Link to Slide2
FYI, this is the standard bootstrap carousel:
<div class="container">
<div id="myCarousel" class="carousel slide" 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I tried with this but it works only if it's the same page:
Go to slide #4
<script>
function goToSlide(number) {
$("#myCarousel").carousel(number);
}
</script>
Even a URL with different slides will do. Something like
mydomain.com/services#slide1
mydomain.com/services#slide2
mydomain.com/services#slide3
You need to call the same function on page load and after the carousel is ready. Get the number from the URL hash and pass it to the function:
$(document).ready(function() {
var number = window.location.hash.replace(/^\D+/g, '');//Get the number
goToSlide(number); //pass it on
});
Also you need to bind a hashchange event:
$(window).on('hashchange', function() {
var number = window.location.hash.replace(/^\D+/g, '');
goToSlide(number);
});
And remove onclick from anchor tags
Is there a way to have multiple generic bootstrap carousels without IDs on a page work separately? Currently, both carousels are working, but when I click prev/next then it changes both carousels. I would think this would target the carousel clicked?
Thanks!
HTML
<div class="carousel slide" data-ride="carousel" data-wlp-component="wlp.carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target=".carousel" data-slide-to="0" class="active"></li>
<li data-target=".carousel" data-slide-to="1"></li>
<li data-target=".carousel" data-slide-to="2"></li>
<li data-target=".carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image1">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image2">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image3">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href=".carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href=".carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Second Carousel -->
<div class="carousel slide" data-ride="carousel" data-wlp-component="wlp.carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target=".carousel" data-slide-to="0" class="active"></li>
<li data-target=".carousel" data-slide-to="1"></li>
<li data-target=".carousel" data-slide-to="2"></li>
<li data-target=".carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image1">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image2">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image3">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href=".carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href=".carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
JS
$('.carousel').each(function(){
$(this).carousel({
interval: 3000
});
$(this).on('click', '.left', function(){
$(this).carousel('prev');
});
$(this).on('click', '.right', function(){
$(this).carousel('next');
});
});
As per my understanding you need to have different selected to bind the events for 2 different carousel. So you need to use different class or different ID or any 2 different selected.
Currently my carousel seems to go to the top of the page. I am using a navbar-fixed-top, so obviously the navbar hides the top part of the carousel. How can I make it so that the carousel stays affixed directly below the navbar? Adding a simple padding wouldnt work as when using a smaller screen, the navbar collapses and is a bit of a different height than when its not collapsed.
Code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="container">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="/images/p51blueprint.jpg" alt="P-51" width="100%">
</div>
<div class="item">
<img src="/images/f-18-hornet.jpg" alt="F-18" width="100%">
</div>
<div class="item">
<img src="/images/p51blackandwhite.jpg" alt="P-51" width="100%">
</div>
<div class="item">
<img src="/images/B-52-Stratofortress-infographic.jpg" alt="B-52" width="100%">
</div>
</div>
</div>
<!-- Control arrows -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
The navbar has been known to cover the content of the website so change the padding for the body then use the media queries to change the padding of the body too for different size. Something along the lines of:
body {
padding-top: 70px;
}
#media screen and (min-width:768px) and (max-width:990px) {
body {
margin-top:100px;
}
}
#media screen and (min-width:991px) and (max-width:1200px) {
body {
margin-top:70px;
}
}