stop autoslide from boostrap carousel with thumbnails - javascript

I am trying to stop autoslide from the bootstrap carousel corresponding to this jsfiddle example.
Whereas
$('.carousel').carousel({
interval: false
});
stops the main carousel, I dident find the way to stop the autosliding from the thumbnail part.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" 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 hiden-xs" 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>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>


Get rid of data-ride="carousel", give your .carousel data-interval="false" attribute.
Quoting W3S
The data-ride="carousel" attribute tells Bootstrap to begin animating
the carousel immediately when the page loads.
If you want it to stop animating, remove .slide class from your your .carousel selector.
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" 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 hiden-xs" 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>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Related

Index after using the gallery in modal the first time is off?

I have some code I found that would help make a webpage have a grid of photos and then once clicked they would be able to have a lightbox modal using bootstrap to go through all the photos. However once getting out of the modal and going to a different one by clicking on it would result in them going to the first picture in the column.
HTML
Grid One:
<section id="im-grid" class="image-grid im-image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_1.jpeg" class="img-fluid" alt="Add Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_2.jpeg" class="img-fluid" alt="Edit Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_3.jpeg" class="img-fluid" alt="Find Parts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_4.jpeg" class="img-fluid" alt="Show Parts">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_5.jpeg" class="img-fluid"
alt="Part Details">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_6.jpeg" class="img-fluid"
alt="Keyboard Shortcuts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_7.jpeg" class="img-fluid"
alt="Part History Part One">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_8.jpeg" class="img-fluid"
alt="Part History Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_9.jpeg" class="img-fluid"
alt="Export Parts Part One">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_10.jpeg" class="img-fluid"
alt="Export Parts Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_11.jpeg" class="img-fluid"
alt="Export Parts Part Three">
</a>
</figure>
</div>
</div>
</div>
<div class="modal lightbox-modal" id="im-lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
<div class="modal-body im-modal-body">
<div class="container-fluid im-container-fluid p-0">
</div>
</div>
</div>
</div>
</div>
</section>
Grid Two:
<section id="sm-grid" class="image-grid sm-image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_1.jpeg" class="img-fluid" alt="Add Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_2.jpeg" class="img-fluid" alt="Edit Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_3.jpeg" class="img-fluid" alt="Find Parts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_4.jpeg" class="img-fluid" alt="Show Parts">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_5.jpeg" class="img-fluid" alt="Part Details">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_6.jpeg" class="img-fluid"
alt="Keyboard Shortcuts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_7.jpeg" class="img-fluid"
alt="Part History Part One">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_8.jpeg" class="img-fluid"
alt="Part History Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_9.jpeg" class="img-fluid"
alt="Export Parts Part One">
</a>
</figure>
</div>
</div>
</div>
<div class="modal lightbox-modal" id="sm-lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
<div class="modal-body sm-modal-body">
<div class="container-fluid sm-container-fluid p-0">
</div>
</div>
</div>
</div>
</div>
</section>
The JavaScript:
Grid One:
const imImageGrid = document.querySelector(".im-image-grid");
const imLinks = imImageGrid.querySelectorAll("a");
const imImgs = imImageGrid.querySelectorAll("img");
const imLightboxModal = document.getElementById("im-lightbox-modal");
const imbsModal = new bootstrap.Modal(imLightboxModal);
const imModalBody = document.querySelector(".im-modal-body .im-container-fluid");
for (const link of imLinks) {
link.addEventListener("click", function (e) {
e.preventDefault();
const imCurrentImg = link.querySelector("img");
const imLightboxCarousel = document.getElementById("im-lightboxCarousel");
if (imLightboxCarousel) {
const imParentCol = link.parentElement.parentElement;
const imIndex = [...imParentCol.parentElement.children].indexOf(imParentCol);
const imbsCarousel = new bootstrap.Carousel(imLightboxCarousel);
imbsCarousel.to(imIndex);
} else {
imCreateCarousel(imCurrentImg);
}
imbsModal.show();
});
}
function imCreateCarousel(img) {
const imMarkup = `
<div id="im-lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${imCreateSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#im-lightboxCarousel" 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="#im-lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
imModalBody.innerHTML = imMarkup;
}
function imCreateSlides(img) {
let imMarkup = "";
const imCurrentImgSrc = img.getAttribute("src");
for (const img of imImgs) {
const imImgSrc = img.getAttribute("src");
const imImgAlt = img.getAttribute("alt");
imMarkup += `
<div class="carousel-item${imCurrentImgSrc === imImgSrc ? " active" : ""}">
<img src=${imImgSrc} alt=${imImgAlt}>
</div>
`;
}
return imMarkup;
}
Grid Two:
const smImageGrid = document.querySelector(".sm-image-grid");
const smLinks = smImageGrid.querySelectorAll("a");
const smImgs = smImageGrid.querySelectorAll("img");
const smLightboxModal = document.getElementById("sm-lightbox-modal");
const bsSmModal = new bootstrap.Modal(smLightboxModal);
const smModalBody = document.querySelector(".sm-modal-body .sm-container-fluid");
for (const link of smLinks) {
link.addEventListener("click", function (e) {
e.preventDefault();
const smCurrentImg = link.querySelector("img");
const smLightboxCarousel = document.getElementById("sm-lightboxCarousel");
if (smLightboxCarousel) {
const smParentCol = link.parentElement.parentElement;
const smIndex = [...smParentCol.parentElement.children].indexOf(smParentCol);
const bsSmCarousel = new bootstrap.Carousel(smLightboxCarousel);
bsSmCarousel.to(smIndex);
} else {
smCreateCarousel(smCurrentImg);
}
bsSmModal.show();
});
}
function smCreateCarousel(img) {
const smMarkup = `
<div id="sm-lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${smCreateSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sm-lightboxCarousel" 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="#sm-lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
smModalBody.innerHTML = smMarkup;
}
function smCreateSlides(img) {
let smMarkup = "";
const smCurrentImgSrc = img.getAttribute("src");
for (const img of smImgs) {
const smImgSrc = img.getAttribute("src");
const smImgAlt = img.getAttribute("alt");
smMarkup += `
<div class="carousel-item${smCurrentImgSrc === smImgSrc ? " active" : ""}">
<img src=${smImgSrc} alt=${smImgAlt}>
</div>
`;
}
return smMarkup;
}
I would just like to be able to exit out of a modal of the photo and then if needed go to a different photo by clicking out of it. Im new to stack overflow so I apologize if the code is

Unable to make the .each() function execute

I'm trying to create a responsive carousel and for that, I need to execute a function to set the siblings of the item.
<div class="container">
<div class="row">
<div class="col-xs-11 col-md-12 col-centered">
<div id="carousel1" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-col col-xs-12">
<div class="block red img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block green img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block blue img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block yellow img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
</div>
<!-- Controls -->
<div class="left carousel-control">
<a href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="right carousel-control">
<a href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
And the JavaScript tag that goes with this is this.
<script language="javascript">
$('.carousel[data-type="multi"].item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
But the probelm is that the each function is never executed. I used Google Chrome debugger and placed a breakpoint on the function definiton. That's how I know that function is being executed. I'm just getting started with this stuff so I might be missing some thing obvious here.

Since the element with class item is inside the carousel element you have to add space before .item. Change you selector To
$('.carousel[data-type="multi"] .item')
$('.carousel[data-type="multi"] .item').each(function() {
console.log(this);
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-11 col-md-12 col-centered">
<div id="carousel1" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-col col-xs-12">
<div class="block red img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block green img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block blue img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block yellow img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
</div>
<!-- Controls -->
<div class="left carousel-control">
<a href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="right carousel-control">
<a href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>

Try this:- Place your code inside $(document).ready(){}); function and also add space before .item $('.carousel[data-type="multi"] > .item')
$(document).ready(function() {
$('.carousel[data-type="multi"] .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-11 col-md-12 col-centered">
<div id="carousel1" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-col col-xs-12">
<div class="block red img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block green img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block blue img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
<div class="item">
<div class="carousel-col col-xs-12">
<div class="block yellow img-responsive"><img src="images/01_103.jpg" alt="Image" style="max-width:100%;"><p class="title-slide">MESSI</p></div>
</div>
</div>
</div>
<!-- Controls -->
<div class="left carousel-control">
<a href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="right carousel-control">
<a href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>

How to call a JavaScript Function in Angular JS for a Carousel

I am trying to call this JavaScript function in my Angular JS controller below. The carousel buttons will not work like the example from this site http://www.bootply.com/1DtSbhZQtI. Where is my error in the JavaScript? Thanks.
var myCarousel = function() {
$('#myCarousel').on('slid.bs.carousel')};
myCarousel();
This is in order to run a thumbnail carousel on my html file, here is the code for the html.
<div class="col-md-6">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><img src="images/StaticBarHeadcountHorizontal.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/StaticBarHeadcountVertical.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/StaticGroupedHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendBarHeadcount.png" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-3"><img src="images/TrendDonutHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendLineHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendLinePercentofTotalHeadcount.png" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>

I think this is not related to angular, you just need to create the carousel with:
$('#myCarousel').carousel();

Modal Lightbox Gallery and Carousel Slider incompatible?

It seems quite challenging to add both the Bootstrap Carousel Slider and
Lightbox Gallery in a single page without significant issues.
Problem: When clicking on the lightbox image gallery it opens up the picture gallery and at the same time the Carousel slider image gets hijacked by the gallery images. The culprit seems to be either the classes: .item, img, or .inner-carousel
Is it possible to add both modal lighbox and carousel slider to a single page without any issues?
To recreate the issue: Click on the image gallery, the modal will pop up, close the window, and now the carousel slider has been replaced by the gallery images. http://jsfiddle.net/2aasoyej/
HTML:
<div class="container">
<div class="row">
<h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
<hr>
<div class="row">
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 1" href="#">
<img class="thumbnail img-responsive" id="image-1" src="http://dummyimage.com/600x350/ccc/969696&text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 2" href="#">
<img class="thumbnail img-responsive" id="image-2" src="http://dummyimage.com/600x350/2255EE/969696&text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 3" href="#">
<img class="thumbnail img-responsive" id="image-3" src="http://dummyimage.com/600x350/449955/FFF&text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="hidden" id="img-repo">
<!-- #image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 11" src="http://dummyimage.com/600x350/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 12" src="http://dummyimage.com/600x600/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 13" src="http://dummyimage.com/300x300/ccc/969696">
</div>
<!-- #image-2 -->
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
</div>
<!-- #image-3-->
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
</div>
</div>
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');">
<center>
<div class="carousel-title">
<h1>Certified General Contractor</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>For all your South Florida construction needs</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');">
<center>
<div class="carousel-title">
<h1>Commercial Contruction</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Build with a company you can trust</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');">
<center>
<div class="carousel-title">
<h1>Home Renovation</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Remodel your home with the best in the field</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev" style="font-size:70px;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next" style="font-size:70px;"></span>
</a>
JS:
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});

In the $(".row .thumbnail").click(function() you are querying $('.carousel-inner') which infact matches both carousels' .carousel-inner
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
..and then you call content.empty() and content.append(repoCopy). This does affect both carousels, too, of course.
You need to be more precise here:
$(".row .thumbnail").click(function(){
var content = $("#modal-carousel .carousel-inner");
Here's the updated fiddle: http://jsfiddle.net/2aasoyej/1/
Udated fiddle that properly disables the interval for the modal carousel, as noted in comments below: http://jsfiddle.net/2aasoyej/4/

How to make 3 images slide at a time?

The below code is sliding one thumbnail at a time. I want to slide 3 at time. Can someone please help. Thanks!
$('.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));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});

The trick is to use bootstrap class "row".
jQuery
$('#myCarousel').carousel({
interval: 10000
})
html
<div class="col-md-7">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
css
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
.carousel-control.left,.carousel-control.right {background-image:none; color: black;}
Hope it helps!

Categories

Resources