My idea is to provide a switch which toggles between a bootstrap carousel and cards, basically one of them will be visible when the the button is pressed(one will be invisible at all times). First I'm trying to make my carousel(existing) invisible, however my javascript code isn't working. I'm pretty new to javascript, I hope I'm not making some stupid mistake. Any help is appreciated, thank you.
function change(toggles) {
var which = document.getElementById("format1");
if (toggles.value == "yes") {
format1.style.display = "block";
toggles.value = "no";
} else {
toggles.value = "yes";
}
};
<div class=" container container1">
<br>
<div class="card card-body" id="card-mine">
<span>[...]</span>
</div>
<div id="format1">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators" style="margin-bottom: 3%;">
[...]
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-color: green">
[...]
</div>
<!-- Slide Five - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-color: #8D6E63">
[...]
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
</a>
</div>
<br>
</div>
</div>
<button id="toggles" class="button toggles" value="yes" onclick="change(this)">Click</button>
</div>
I tried your code and the problem is in the logic, you are setting it to visible on the first if block, it was suppose to be invisible.
if (toggles.value == "yes") {
which.style.display = "none";
toggles.value = "no";
} else {
toggles.value = "yes";
which.style.display = "block";
}
Related
I just took the basic carousel from the bootstrap website and want to integrate it into my web application. My problem is that I want to adjust the content of my website based on the current active slide of the carousel...is that possible?
If the first slide is active, I want to show div One, if the second slide is active, I want to show div Two.
I think I somehow just need to get the active index of the carousel to write my js script?
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" onclick="changeContentBasedOnActiveSlide()" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1" onclick="changeContentBasedOnActiveSlide()"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" id="one">
<img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>One</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item" id="two">
<img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Two</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="divOne">
Slide One
</div>
<div id="divTwo">
Slide Two
</div>
Thanks to the answer I worked something out. This works for me...for sure it can be improved...
function changeContentBasedOnActiveSlide(){
var slideOne = document.getElementById("one").className;
var slideTwo = document.getElementById("two").className;
var one = document.getElementById("divOne");
var two = document.getElementById("divTwo");
if(slideOne.localeCompare("carousel-item active") === 0){
one.style.display = "none";
two.style.display = "block";
} else if(slideTwo.localeCompare("carousel-item active") === 0){
one.style.display = "block";
two.style.display = "none";
} else {
console.log("No active slide.")
}
}
You may add a function to next/prev buttons.
Add additional classes to both divs with carousel-item to make it unique.
And after pressing next/prev u check if active div has that unique class and then distplay div class "one" or "two".
i´m a little new here, i was looking for the answer and i didn´t find it.
I'm starting as a web designer/web developer.
I have a carousel of images in bootstrap, and a div at the top of it. This div is a simple title to the page.
i want to change the color title for a particular image when this is "active".
I tried this (because i saw that the image that is showing change its class name: "carousel-item" to: "carousel-item active") , but doesn't work.
This is my HTML:
<div id="titulo">Game of thrones</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item " data-interval="3000">
<img src="/img/portrait.jpg" class="d-block w-100" alt="throne">
</div>
<div class="carousel-item active" id="dragon" data-interval="3000">
<img src="/img/dragon.jpeg" class="d-block w-100" alt="got" data-interval="3000">
</div>
<div class="carousel-item" >
<img src="/img/houses.jpg" class="d-block w-100" alt="houses" data-interval="3000">
</div>
<div class="carousel-item" >
<img src="/img/evil.jpeg" class="d-block w-100" alt="badguy" data-interval="3000">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
const titulo= document.querySelector("#titulo");
const dragon=document.querySelector("#dragon");
if(dragon.classList.contains("active")){
titulo.style.color = "black";
}
</script>
The reason your current code isn't working is because the script only runs once when the page is loaded. Bootstrap comes with events that you can attach a function to which means you can check the class each time the carousel moves. You can read more about carousel events here.
Using the example in the link you can use the following, without changing your existing code too much:
$('#carousel').on('slid.bs.carousel', function () {
const titulo = document.querySelector("#titulo");
const dragon = document.querySelector("#dragon");
if (dragon.classList.contains("active")) {
titulo.style.color = "black";
}
});
Note: the event is slid not slide since the active class isn't applied until the slide transition has completed.
What might be better is to read the relatedTarget of the event and check if that is the dragon:
$('#carousel').on('slide.bs.carousel', function (evt) {
const titulo = document.querySelector("#titulo");
if (evt.relatedTarget.id === 'dragon') {
titulo.style.color = "black";
}
});
I am using bootstrap carousel thumbnail. Currently the slider clone after complete the last slider . I need to stop repeating item when my slider count less than 3. I have tried the below script. Anyone help me to achieve this .
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
</div>
</div>
</div>
<div class="clearfix">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /myCarousel -->
</div>
<!-- /clearfix -->
below script I wast tried for 3 items. How to make it for one and two items with simplified script.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
} else {
//what to be here
}
[my code link]
you might be missing some css, try experiment with this code:
https://www.bootply.com/124854#
I'm having a silly problem with a slightly customised Bootstrap carousel when it has more than 10 slides. The slides in double figures are not registering when you click the thumbnails?
<div class="col-md-12" id="slider">
<div id="theGallery" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<div class="desc">
<p>This is image 1</p>
</div>
<img src="slide-1.jpg" class="img-responsive"> </div>
<!-- ... 2,3, 4 and so on -->
<div class="item" data-slide-number="10">
<div class="desc">
<p>This is image 11</p>
</div>
<img src="slide-11.jpg" class="img-responsive"> </div>
</div>
<a class="left carousel-control" href="#theGallery" role="button" data-slide="prev"> <span>Previous</span> </a> <a class="right carousel-control" href="#theGallery" role="button" data-slide="next"> <span>Next</span> </a> </div>
</div>
<!-- Thumbnails -->
<div class="thumbs hidden-sm hidden-xs">
<div class="width-auto" id="slider-thumbs">
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected"> <img src="slide-1.jpg" class="img-responsive"> </a></li>
<!-- ... 2,3, 4 and so on -->
<li> <a id="carousel-selector-10" class=""> <img src="slide-11.jpg" class="img-responsive"> </a></li>
</ul>
</div>
</div>
$(document).ready(function() {
$('#theGallery').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#theGallery').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#theGallery').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
});
Probably something really simple. Any help appreciated. Thanks in advance!
Add radix to parseInt:
id = parseInt(id, 10);
I have a multiple items carousel. How can I hide the left control if the carousel is on the first item, and how can I hide the right control when the carousel is on the last item. I've tried codes below but it doesn't work.
$('#kesfetCarousel').on('slid', '', checkitem);
checkitem();
function checkitem()
{
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right').hide();
} else {
$this.children('.carousel-control').show();
}
}
<div class="categoryBlock col-md-12 carousel slide" id="kesfetCarousel" data-ride="carousel">
<div class="subject">
<div class="nextPrev">
<div class="next"><a class="right carousel-control" href="#kesfetCarousel" role="button" data-slide="next"><i class="icon-rigthArrow2Black"></i> Next</a></div>
<div class="prev"><a class="left carousel-control" href="#kesfetCarousel" role="button" data-slide="prev"><i class="icon-leftArrowBlack2"></i> Prev</a></div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="carousel-inner" role="listbox">
<div class="categoryList col-md-12 item">
<div class="categoryContent col-md-4">
<img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
</div>
<div class="categoryContent col-md-4">
<img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
</div>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="carousel-inner" role="listbox">
<div class="categoryList col-md-12 item">
<div class="categoryContent col-md-4">
<img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
</div>
<div class="categoryContent col-md-4">
<img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
</div>
</div>
</div>
</div>
You are on the right track. Your code doesn't work, because $this is not defined. This has to be $(this).
Secondly, the slid event should be named slid.bs.carousel.
Thirdly, your if-statement will not work correctly. Assume that the right control is hidden and assume that the carousel continues to the first slide. Your code will hide the left control, but the right control remains hidden.
So, you need a separate if-else to either hide or show the left control. And another if-statement for the right control.
Your code may look like:
$('#kesfetCarousel').on('slid.bs.carousel', checkitem);
checkitem();
function checkitem()
{
if($('.carousel-inner .item:first').hasClass('active')) {
$(this).children('.left.carousel-control').hide();
} else {
$(this).children('.left.carousel-control').show();
}
if($('.carousel-inner .item:last').hasClass('active')) {
$(this).children('.right.carousel-control').hide();
} else {
$(this).children('.right.carousel-control').show();
}
}