Develop Reference

Change background color on carousel item change

I've spent hours on this and can't figure it out, so help would be appreciated.
I have a carousel that uses a foreach loop to create the items. One of the requirements, however, is that the div housing the carousel should have its color changed on the data used from the foreach.
<div class="p-0 col-lg-6 text-light d-none d-sm-block w-50 h-100">
<div id="carousel" class="carousel d-flex flex-column justify-content-center align-items-center w-100 h-100 rounded bg-danger" data-bs-ride="carousel">
<div class="carousel-inner justify-content-center" role="listbox">
#foreach($marketingItems as $marketingItem)
<div class="carousel-item text-center h-100 {{ $loop->first ? 'active' : '' }}">
#if($marketingItem->image != null)
<div class="item">
<img src="{{get_marketing_image($marketingItem->image)}}"
alt="{{$marketingItem->image}}" class="img-thumbnail pb-5">
</div>
#endif
The above is an example of one item, I want to change the background color of the div id: carousel using my $marketingItem->bg_color and replace the bg-danger.
I found this:
$("#carousel").on('slide.bs.carousel', function () {
document.getElementById("carousel").style.backgroundColor = "red";
});
But that doesn't seem to work... Please help! Thanks..

Try to change your js like :
$(document).ready(function(){
$("#carousel").on('slide.bs.carousel', function () {
document.getElementById("carousel").style.backgroundColor = "red";
});
});

Managed to figure it out, redid the css and managed to get it inside the box. Had some bootstrap stuff that was applying a margin and what not. Thanks for the help!

How can you change an image on a bootstrap carousel on click?

I currently have a bootstrap carousel with 3 images each image has a caption I want it so when you click on the caption on the first carousel image the image will change to a gif but it isn't working using basic JavaScript.
I want plymouthImg to change into permitionImg, currently permitionImg display is set to none!important
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img id="plymouthImg" src="imgs/plymouth1.jpg" class="d-block w-100" alt="Roland Levinsky Building">
<img id="permitionImg" src="imgs/plymouthbaw.gif" class="d-block w-100" alt="Permition">
<div class="carousel-caption d-md-block">
<h3 onclick="changeText()" class="plymouth">Welcome to the University of Plymouth</h3>
<h3 class="permition">Welcome to Permition</h3>
</div>
</div>
This is the JavaScript function on the h3
function changeText() {
const plymouthText = document.querySelector('.plymouth');
const permitionText = document.querySelector('.permition');
const plymouthImg = document.getElementById('plymouthImg');
const permitionImg = document.getElementById('permitionImg');
plymouthText.style.display = "none";
permitionText.style.display = "block";
plymouthImg.style.display = "none!important";
permitionImg.style.display = "block!important";
}

Figured it out myself so gonna leave my solution here in case anyone else has this problem. By wrapping the images in their own individual div and applying the display changes to the divs instead of the images it bypasses any styling that is overriding the JavaScript I wrote
HTML
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div id="plymouthImg">
<img src="imgs/plymouth1.jpg" class="d-block w-100" alt="Roland Levinsky Building">
</div>
<div id="permitionImg">
<img src="imgs/plymouthbaw.gif" class="d-block w-100" alt="Permition">
</div>
<div class="carousel-caption d-md-block">
<h3 onclick="changeText()" class="plymouth">Welcome to the University of Plymouth</h3>
<h3 class="permition">Welcome to Permition</h3>
</div>
JavaScript
function changeText() {
const plymouthText = document.querySelector('.plymouth');
const permitionText = document.querySelector('.permition');
const plymouthImg = document.getElementById('plymouthImg');
const permitionImg = document.getElementById('permitionImg');
plymouthText.style.display = "none";
permitionText.style.display = "block";
plymouthImg.style.display = "none";
permitionImg.style.display = "block";
}

Angular Carousal not working with ng-repeat

I am working on angular carousal to make images slides which are coming as an array.
But unfortunately its not working as an slider.
How to solve this problem ? Any solution ?
//HTML
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="img in vehicleImgArr"> <img src="{{img}}">
<div class="container">
<div class="carousel-caption"> </div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#myCarousel" ng-repeat="img in vehicleImgArr" data-slide-to="{{img}}"></li>
</ol>
//JS
var app = angular.module('VehicleDetails', ['angularUtils.directives.dirPagination']);
app.controller('vehiclefulldetails',['$scope', '$http', function($scope, $http){
if($scope.vehicletrxdetails[0].document_name != null){
$scope.vehicleImg = $scope.vehicletrxdetails[0].document_name;
$scope.vehicleImgArr = $scope.vehicleImg.split(',');
}
}]);
Example: vehicletrxdetails[0].document_name = https://files.allaboutbirds.net/wp-content/uploads/2015/06/prow-featured.jpg, https://www.scientificamerican.com/sciam/cache/file/268F292B-5DDD-4DB1-B5ABC6541A70ECDF_source.jpg
Any help would be great.
Thanks in advance

Anyways I fixed it using,
$("ol.carousel-indicators").click(function(e){
e.preventDefault();
$(this).parent().carousel($(this).data("slide"));
});

Trying to stop bootstrap carousel from pausing on hover

I have a bootstrap carousel with a progress bar that fill up and triggers the next slide. My problem is that right now the carousel pauses when i hover the mouse over the slides and i want it to not pause and keep going.
Here is my code:
$(document).ready(function(){
var percent = 0,
interval =35//it takes about 6s, interval=20 takes about 4s
$bar = $('#progress-bar'),
$crsl = $('#carousel-hero');
$('.carousel-indicators li, .carousel-control').click(function (){$bar.css({width:0.5+'%'});});
/*line above just for showing when controls are clicked the bar goes to 0.5% to make more friendly,
if you want when clicked set bar empty, change on width:0.5 to width:0*/
$crsl.carousel({//initialize
interval: false,
pause: false
}).on('slide.bs.carousel', function (){percent = 0;});//This event fires immediately when the bootstrap slide instance method is invoked.
function progressBarCarousel() {
$bar.css({width:percent+'%'});
percent = percent +0.5;
if (percent>=100) {
percent=0;
$crsl.carousel('next');
}
}
var barInterval = setInterval(progressBarCarousel, interval);//set interval to progressBarCarousel function
if (!(/Mobi/.test(navigator.userAgent))) {//tests if it isn't mobile
$crsl.hover(function(){
clearInterval(barInterval);
},
function(){
barInterval = setInterval(progressBarCarousel, interval);
}
);
}
});
And my HTML :
<div id="carousel-hero" class="carousel slide" data-ride="carousel"><!-- Main Slider -->
<ol class="carousel-indicators">
<li data-target="#carousel-hero" data-slide-to="0" class="active"></li>
<li data-target="#carousel-hero" data-slide-to="1"></li>
<li data-target="#carousel-hero" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><!-- First Slide -->
<div class="overlay"></div>
<img src="images/hero1.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE ARE <span class="colored">NIXO</span> CREATIVE</h1>
<h5>Branding | Design | Developement</h5>
</div>
</div>
<div class="item"><!-- Second Slide -->
<div class="overlay"></div>
<img src="images/hero2.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE <span class="colored">ALWAYS</span> DELIVER</h1>
<h5>UX | Marketing | Ideas</h5>
</div>
</div>
<div class="item"><!-- Third Slide -->
<div class="overlay"></div>
<img src="images/hero3.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE <span class="colored">LOVE</span> DESIGN</h1>
<h5>Beautiful | Clean | Inspiring</h5>
</div>
</div>
<!-- Carousel Controlls -->
<a id="hero-control-left" class="control-hero control-left" href="#carousel-hero" role="button" data-slide="prev">
<span class="pe-7s-angle-left pe-4x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="hero-control-right" class="control-hero control-right" href="#carousel-hero" role="button" data-slide="next">
<span class="pe-7s-angle-right pe-4x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="progress-bar"></div> <!-- Carousel Progress Bar -->
</div>
THINGS I'VE TRIED:
in the js file setting pause: 'none'
adding data-pause="false" to the carousel
having puase: false and data-pause="false" at the same time
Any help is apreciated.

Set Pause to null and data-pause="false"
$crsl.carousel({//initialize
interval: false,
pause: null
})
<div id="carousel-hero" class="carousel slide" data-ride="carousel" data-pause="null">
Read more about the carousel options here
https://v4-alpha.getbootstrap.com/components/carousel/#options
For avoiding the progress bar stop remove the code for crsl.hover which clears interval for the progress bar and restart it on blur.
Working Example : https://jsfiddle.net/ne9x9Lp1/

I had the same problem. Just solved it by changing the bootstrap js file (in my case bootstrap.bundle.min.js)
ctrl+f=pause to make it easy to find, it was pause:"hover" and I change it for:
pause:"false"
hope this helps.

Each time window resizes, the append method keeps adding to container

I'm trying to switch out my images in Bootstrap's carousel at the 768px breakpoint only for responsive purposes. So I decided to use the resize() method and append the smaller images to the .carousel-inner div when they reach equal to or less than to 768px or maintain large images if window is larger than 768. However, when ever I resize the window it keeps appending those images over and over again until I stop resizing. Only returns to normal when I refresh. Which this all makes sense that it the code executes every time the window gets resized. So I was wondering if there is a method out there that I should be trying instead? I kind want it to act like a media query... I have pasted my code below and you can check it out on my GitHub: https://ldgoncalves.github.io/ChamberStat/html/index.html
I'm using Laravel 5.3 for this as well.
$(window).on("resize load", function () {
if ($(window).width() <= 768) {
var smallerImg = '<div class="item active"><img src="{{asset('images/slide4.png')}}" alt="First slide of a customer review"></div>' +
'<div class="item"><img src="{{asset('images/slide5.png')}}" alt="Second slide of a customer review"></div>' +
'<div class="item"><img src="{{asset('images/slide6.png')}}" alt="Third slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide7.png')}}" alt="Fourth slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide8.png')}}" alt="Fifth slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide9.png')}}" alt="Sixth slide of a customer review"></div>';
$('.carousel-inner').append(smallerImg);
}
else{
var largerImg = '<div class="item active"><img src="{{asset('images/slide1.png')}}" alt="First slide of customer reviews"></div>' +
'<div class="item"><img src="{{asset('images/slide2.png')}}" alt="Second slide of customer reviews"></div>' +
'<div class="item"><img src="{{asset('images/slide3.png')}}" alt="Third slide of customer reviews"></div>';
$('.carousel-inner').append(largerImg);
}
});
<!-- Testimonials -->
<section id="testimonials" class="row">
<h1 class="col-xs-12 col-md-12">Testimonials</h1>
<p class="col-xs-12 col-md-12">ChamberStat will get you organized, but don't take our word for it! See what
our customers are saying.</p>
<!-- bootstrap carousel -->
<div class="clearfix hidden-sm-up"></div>
<div id="testimonials-slide" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators col-lg-1">
<li data-target="#testimonials-slide" data-slide-to="0" class="active"></li>
<li data-target="#testimonials-slide" data-slide-to="1"></li>
<li data-target="#testimonials-slide" data-slide-to="2"></li>
<li data-target="#testimonials-slide" data-slide-to="3"></li>
<li data-target="#testimonials-slide" data-slide-to="4"></li>
<li data-target="#testimonials-slide" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
</div>
<a class="left carousel-control" href="#testimonials-slide" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#testimonials-slide" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

You only want the content change to happen when the mode changes. And you probably want to empty() the list when changing content. Something like this:
$(window).on("resize load", function () {
var largerImg = '...';
var smallerImg = '...';
var $carousel = $('.carousel-inner');
var lastMode = $carousel.hasClass('small') ? 'small' : 'large';
var newMode = $(window).width() <= 768 ? 'small' : 'large';
if (lastMode === newMode)
return;
if (newMode === 'small') {
$carousel.addClass('small').empty().append(smallerImg);
} else{
$carousel.removeClass('small').empty().append(largerImg);
}
});

Quick idea: You could store the last window size in a var. An only change the images, if oldSize > breakpoint && newValue <= breakpoint. And vice versa for the other "mediaQuery".