Bootstrap Carousel Change a particular color div - javascript

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";
}
});

Related

Bootstrap carousel: Measure time that an image is open

does anyone know how to measure the time that an image in an Bootstarp 5 carousel (see below) is visible for the user? The idea is to measure the time that the user is looking at a specific image (e.g. image of a product) in the carousel.
f.e. the time in milliseconds that the image "image_1" is visible (open).
Many thanks,
````
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="image_1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="image_2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="image_3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
````
Something like this could work:
var intervalTime = 100;
var carousel = document.getElementById('carouselExampleControls')
var timesMilliseconds = {
0: 0
};
var currentSlideIndex = 0;
var interval = setInterval(function() {
if (timesMilliseconds.hasOwnProperty(currentSlideIndex)) {
timesMilliseconds[currentSlideIndex] += intervalTime;
} else {
timesMilliseconds[currentSlideIndex] = intervalTime;
}
}, intervalTime);
carousel.addEventListener('slide.bs.carousel', function (event) {
var currentIndex = currentSlideIndex.toString();
var currentTotalTime = timesMilliseconds[currentSlideIndex].toString();
console.log('Looked at slide ' + currentIndex + ' for a total of ' + currentTotalTime + ' ms');
currentSlideIndex = event.to;
});
https://jsfiddle.net/412nu3dy/2/

Dynamic bootstrap carousel with thumbnail navigation in PHP and Bootstrap

I want to make a dynamic bootstrap carousel with image thumbnails at the bottom. I went through several code snippets and answers which seems to be working in their demo and experimented those codes. I just got the code in this link working but the thumbnail was too small. Here are the functions I wrote to make dynamic carousel...
//make image thumbnails
function make_image_previews ($con){
$output = '';
$count = 0;
$result = make_query($con); //returns the images in database
while($row = mysqli_fetch_array($result)){
if($count == 0){
$output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active">
<img class="d-block w-100 img-fluid" src="'.$row['image'].'">
</li>';
}else{
$output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'">
<img class="d-block w-100 img-fluid" src="'.$row['image'].'">
</li>';
}
$count = $count + 1;
}
return $output;
}
And here is the html output in page source
<div class="row">
<div class="col-md-12">
<div id="dynamic_slide_show" class="carousel slide light-shadow carousel-fade carousel-thumbnails" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="upload/protected_photo-1515879218367-8466d910aaa4.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg" class="d-block w-100" />
</div>
</div>
<a class="carousel-control-prev" href="#dynamic_slide_show" 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="#dynamic_slide_show" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Carousel image preview-->
<ol class="carousel-indicators">
<li data-target="#dynamic_slide_show" data-slide-to="0" class="active">
<img class="d-block w-100 img-fluid" src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg">
</li>
<li data-target="#dynamic_slide_show" data-slide-to="1">
<img class="d-block w-100 img-fluid" src="upload/protected_photo-1515879218367-8466d910aaa4.jpg">
</li>
<li data-target="#dynamic_slide_show" data-slide-to="2">
<img class="d-block w-100 img-fluid" src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg">
</li>
</ol>
</div>
</div>
</div>
<hr>
There was a question with the same problem but the code was different to what I have provided in the link at top. I tried the answer changing the code but I was able only to see the three underlines. How can I solve the problem of small thumbnails in my code?
EDIT
When I tried the CSS
.carousel-indicators {
position: static;
}
.carousel-indicators>li {
width: 100px
}
the thumbnail overflows onto the next row. As in following picture, horizontal line, (<hr> tag) is on the end of the row where the carousel is present
Here is an example jsfiddle: https://jsfiddle.net/setw7kn0/
You can set the images width by changing .carousel-indicators > li to whatever you want (in the example i have used 100px). Also the position: static; in .carousel-indicators is to make the thumbnails stop overlapping the carousel.
Tell me if this is what you were looking for.
EDIT:
Well the reason that .carousel-indicators is overlapping the hr it's because hr shouldn't be placed directly inside .row, instead should be either inside a column inside a row or after the .row closing tag.
Also i have changed the .carousel-indicators > li height to auto so that you override the defaults bootstrap css, the default value of bootstrap is height: 3px; (so you are actually fighting bootstrap).

button to toggle between 2 layouts is not working with javascript

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";
}

How do i use the direction property for a bootstrap 4 carousel?

I see on the documentation page for bootstrap's carousel there is a property for direction under the events tab but i don't know the syntax to use it and can't find any examples, would appreciate any help on this.
From bootstrap's carousel documentation:
Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item
The carousel will emit an event called slide.bs.carousel (This event is fired when the carousel has completed its slide transition).
That event object has a property called direction (and its value is either "left" or "right").
$(function() { $("#carouselExampleControls").on("slide.bs.carousel", function(e) {
console.log(e.direction);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Scrolling to a position with bootstrap carousel button

I have a carousel button that scrolls back and forward through images.
The issue I have is that the href of the carousel is "#phonedemo" as this is where the images are stored. The scroll also moves to that specific position.
The issue I am having is that the carousel is contained inside another image, and I want the scroll to go to the top of that image.
Changing to href="#contentfeadtures" moves it to the correct position, but it no longer changes the carousel images.
Here is the html.
<div id="contentFeadtures" class="row">
<h1 class="col-White">Features</h1>
<div class="row">
<div id="phonedemo" class="carousel slide" data-ride="carousel">
<div class="phonedemoHouseing">
<div class="phonedemoContainer">
<div class="carousel-inner center-block" role="listbox">
<div class="item active">
<img src="images/carousel-1-ca.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#phonedemo" role="button" data-slide="prev">
<img src="images/back.png" class="img-responsive">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#phonedemo" role="button" data-slide="next">
<img src="images/forward.png" class="img-responsive">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
jquery
//scrollto
            $('.navbar').localScroll(200,{
easing:'elasout'
});
$('section#objective,section#creationdesign,section#features,section#results').localScroll(2000,{
                easing:'elasout'
            });
So instead of the button scrolling to #phonedemo, I want it go to to #contentfeadtures but retain the moving page ability.
If you are using jQuery then capturing click event of anchor tags and scroll to top of #contentfeadtures may trick out this issue.
$('.carousel-control').on('click', function() {
$('html, body').scrollTo('#contentfeadtures',{duration:'slow', offsetTop : '0'});
});
Another solution you can try out
Replace href with data-target attribute refering to your carousel.
data-target="#phonedemo"
Lokesh Yadav's suggestion of replacing the href with the data-target solved my problem. When I clicked on the carousel control the slide climbed to the top and was hidden behind the menu with affix top. Now it stays static. I'm Brazilian and I needed to translate this comment.

Categories

Resources