Develop Reference

How to loop over carousel items using Vanilla Js

I'm fetching data from The Movie Database and i want the data retrieved to be displayed in my page on a carousel card with 3 slides.
Here is what i have done so far,
html,
<div class="details"><!--Movie details are to be displayed here--></div>
Js,
<script type="text/javascript">
function arrangement(resultFromServer) {
let gridHtml=" ";
let poster= "https://image.tmdb.org/t/p/w185/";
let element= document.querySelector(".details");
let index= [].indexOf.call(element.parentElement.children, element);
let selected = resultFromServer.results[index];
for (let i = 0; i < resultFromServer.results.length; i++) {
const movieResults =resultFromServer.results[i];
gridHtml += `
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="${poster}${movieResults.poster_path}"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">${movieResults.title}</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>`;
}
let myPage= document.querySelector(".details");
myPage.innerHTML=gridHtml;
}
</script>
What i get from this is that the movie details are returned in a vertical arrangement. Can someone help please !

You need to use querySelector to check for an 'active' class.
function myFunction(e) {
var carousel = document.querySelector(".active");
if(carousel !==null){
carousel.classList.remove("active");
}
e.target.className = "active";
}
querySelector is used to find an active class on the page, if it exists (the if statement) then remove it and apply the active class on the next element, iterating through the entire collection.

Changing a bootstrap carousel's index with jquery reactivates auto-play

What I want to do:
I have a bootstrap carousel and 5 divs. When I hover on the first div I want to show the first carousel-item...etc
What I did:
I deactivated the auto play with data-interval="false"
When hovering those controlling items, the following function is called:
function changeImage(index) {
$("#carousel").carousel(index); // index is the active carousel-item's index
}
What happened:
Before hovering on any controlling item, the carousel doesn't auto play.
After hovering on any controlling item, the carousel displays the expected carousel-item, however the carousel starts auto-playing.
What I tried:
Using Jquery I set the interval to false after each time I navigate in the carousel:
function changeImage(index) {
$("#carousel").carousel(index);
$('#carousel').carousel({
interval: false
})
}
But it didn't work.
Full code:
<div id="carousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item">
<img src="..."/>
</div>
<div class="carousel-item active">
<img src="..."/>
</div>
<div class="carousel-item">
<img src="..."/>
</div>
<div class="carousel-item">
<img src="..."/>
</div>
</div>
</div>
<div id="controls">
<div onmouseover="changeImage(0)">1</div>
<div onmouseover="changeImage(1)">2</div>
<div onmouseover="changeImage(2)">3</div>
<div onmouseover="changeImage(3)">4</div>
<div onmouseover="changeImage(4)">5</div>
</div>
<script>
$('#carousel').on('slide.bs.carousel', function () {
$('#carousel').carousel({
interval: false
})
})
function changeImage(index) {
$("#carousel").carousel(index);
}
</script>

want to display images in carousel format with mysql

I m designing mobile view web-app.
I want to display images in Carousel. when I directly write code (I m getting the code here: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h) then it works fine. but when I m append the MySQL code its display in-line format like this:
this is my carousel code:-
<div class="row">
<div class="col s12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" id="marquee">
</div>
</div>
</div>
</div>
and this is javascript code:-
$(document).ready(function()
{
var url="http://api.dentallabworld.com/marquee.php"; //This file returns json data
$.getJSON(url,function(result){
console.log(result);
$.each(result, function(i, field){
var id=field.Id;
var marquee=field.Image;
$("#marquee").append('<div class="item active"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
});
});
});
I want to display proper carousel code

Because your loop add class="item active" each element and show all of them. You can add class="item" except first.
This might works:
$.each(result, function(i, field){
var id=field.Id;
var marquee=field.Image;
if(i==0){
$("#marquee").append('<div class="item active"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
} else {
$("#marquee").append('<div class="item"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
}
});

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".