We Keep Coding

Customized Bootstrap Carousel - only show set number of DIVs

I have implemented a bootstrap carousel which looks like this on loading:
The code is as follows:
html:
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-wrap="false">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-1">
<div class="card card-body">
1
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-1">
<div class="card card-body">
2
</div>
</div>
</div>
... carousel-item divs repeat to 18 ...
<div class="carousel-item">
<div class="col-md-1">
<div class="card card-body">
18
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Javascript:
$('.carousel .carousel-item').each(function () {
var minPerSlide = 12;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
CSS:
#media (max-width: 768px) {
.carousel-inner .carousel-item > div {
display: block;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 12 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(8.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-8.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
I don't want to the carousel to repeat when I get to the end (clicking the right arrow 6 times):
However it seems I can continue clicking the right arrow until the 18 is the first div in the row:
I cannot figure out how to stop the right button from carrying out a move when the last (18) div first appears on screen (i.e. the second screenshot above).
Any help is greatly appreciated or if anything isn't clear please let me know.

So I managed to find the event that fires 'after' a slide completes and this is where I needed to handle the changes. Also, making use of the current Active attribute that gets auto-assigned to the current WeatherElement. Code working now looks like this:
html:
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-wrap="false">
<div class="carousel-inner carousel-weather w-100" role="listbox">
<div id="weatherCard_0" class="carousel-item active">
<div class="col-md-1">
<div class="card card-body">
1
</div>
</div>
</div>
... repeat till 18
<div id="weatherCard_18" class="carousel-item">
<div class="col-md-1">
<div class="card card-body">
18
</div>
</div>
</div>
</div>
<a id="leftWeatherButton" class="carousel-control carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="rightWeatherButton" class="carousel-control carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Where I have removed the onClick() events from the buttons.
Jaascript:
$('#recipeCarousel').bind('slid.bs.carousel', function (e) {
var $this = $(this);
$this.children('.carousel-control').show();
var weatherElements = $('.carousel-weather')[0].children;
var elementsLength = weatherElements.length - 1;
var first = weatherElements[0];
var lastCount;
if (elementsLength <= 11) {
lastCount = 0
}
else {
lastCount = elementsLength - 11;
}
var last = weatherElements[lastCount];
if ($(last).hasClass('active')) {
$this.children('.carousel-control-next').hide();
} else if ($(first).hasClass('active')) {
$this.children('.carousel-control-prev').hide();
}
});
function ManageWeatherButtons() {
$("#leftWeatherButton").hide();
$("#rightWeatherButton").hide();
debugger;
if (weatherCards.length > 12) {
$("#rightWeatherButton").show();
}
}
Which replaces all of the javascript from the initial code example.
This seems to work a lot better and will behave no matter how much you click the buttons.

jQuery element styles are not working in Safari

I created a bootstrap carousel slider in my HTML. When loading and reloading the page, it takes a second to load the carousel image and meantime all the image borders and carousel indicators are there. Then I created a code to invisible all the borders and elements of carousel until loading the image. This is working perfectly in Chrome, Firefox, IE, Edge and Opera but doesn't working in Safari.
$(".carousel-img").on('load', function() {
$(".carousel-indicators").css({
display: "-webkit-flex",
display: "-webkit-box",
display: "-moz-flex",
display: "-moz-box",
display: "-ms-flexbox",
display: "flex",
"flex-direction": "row"
});
}).attr("src", $(".carousel-img").attr("src"));
.carousel-indicators {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src="https://dummyimage.com/100x50/00f/ff0" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src="https://dummyimage.com/100x50/0f0/f0f" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src="https://dummyimage.com/100x50/f00/0ff" alt="..."></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://dummyimage.com/100x50/00f/ff0" alt="..." class="carousel-img">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/0f0/f0f" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/f00/0ff" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" 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" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
In safari, This carousel-indicators are not showing at all. All the other browsers are showing it correctly. How to fix it?

This is my solution:
I moved some code in functions
I moved CSS from JS to CSS
I check for load event as well as complete status for every img
If complete or loaded I remove that image from the queue
If queue empty, show indicators
console.clear()
jQuery(function($) {
var $queue = $(".carousel-img")
var total = $queue.length;
$queue
.each(checkLoaded)
$queue
.on('load', onloadImage)
function checkShowIndicators() {
if ($queue.length === 0) {
$(".carousel-indicators").addClass('after-load')
}
}
function onloadImage() {
console.info('loaded: ' + $(this).attr('src'))
$queue = $queue.not(this)
checkShowIndicators();
}
function checkLoaded() {
if ($(this).get(0).complete) {
console.info('complete: ' + $(this).attr('src'))
$queue = $queue.not(this)
checkShowIndicators();
}
}
});
.carousel-indicators{
display: none;
}
.carousel-indicators.after-load {
display:-webkit-flex;
display:-webkit-box;
display:-moz-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-direction: row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src="https://dummyimage.com/100x50/00f/ff0" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src="https://dummyimage.com/100x50/0f0/f0f" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src="https://dummyimage.com/100x50/f00/0ff" alt="..."></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://dummyimage.com/100x50/00f/ff0" alt="..." class="carousel-img">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/0f0/f0f" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/f00/0ff" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" 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" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

And if you try to add the line display:"-webkit-flexbox",
$(".carousel-img")
.on('load', function() {
$(".carousel-indicators").css({ display:"-webkit-flex",
display:"-webkit-box",
display:"-webkit-flexbox",
display:"-moz-flex",
display:"-moz-box",
display:"-ms-flexbox",
display:"flex",
"flex-direction":"row"
});
})
.attr("src", $(".carousel-img").attr("src"));

Please try to look like.
$(".carousel-img")
.on('load', function() {
$(".carousel-indicators").css({ display:"-webkit-flex",
display:"-webkit-box",
display:"-moz-flex",
display:"-moz-box",
display:"-ms-flexbox",
display:"-webkit-flexbox",
display:"flex",
"flex-direction":"row"
});
})
.attr("src", $(".carousel-img").attr("src"));

How can I count the number of times a class of my html element changes?

I have 3 elements of the type div that makes a carousel with bootstrap. Each of these divs have a default class called 'item' and when the div is selected or visible it also has the class 'active'.
What I want to do is count how many times each of the items were visible (or in other words, had the active class). How would I go about doing that?
<div id="carousel" class="carousel slide" data-ride="carousel">
<div runat="server" id="CarouselHtml" class="carousel-inner" style="height: 500px;">
Here the code of the slides is generated with the class item
</div>
<a href="#carousel" ID="tagLeft" onclick="waitchange();" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" ID="tagR" class="right carousel-control" onclick="waitchange();"; data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
The html code that are the divs with the item classes are generated by C#

This kind of thing should be handled by hooking into the controller for the carousel. But, in case that's not possible, you can use MutationObserver:
$(window).on('load', () => {
const item = $('#item');
let lastClassName = item.attr('class');
let timesChanged = 0;
const mutationObserver = new MutationObserver((mutations) => {
console.log('mutation occured');
const currentClassName = item.attr('class');
if (currentClassName === 'active' && lastClassName === 'item') {
timesChanged = timesChanged + 1;
}
console.log(`times-changed: ${timesChanged}`);
lastClassName = currentClassName;
});
mutationObserver.observe(
item.get(0),
{
attributes: true,
},
);
window.setInterval(
() => {
const currentClassName = item.attr('class');
if (currentClassName === 'item') {
item.attr('class', 'active');
} else {
item.attr('class', 'item');
}
},
5000
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<div runat="server" id="CarouselHtml" class="carousel-inner" style="height: 500px;">
</div>
<div id="item" class="item"
<a href="#carousel" ID="tagLeft" onclick="waitchange();" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" ID="tagR" class="right carousel-control" onclick="waitchange();"; data-slide="next">
<span class="glyphicon glyphicon-chevron-right" ></span>
</a>
</div>
</div>

Wrap a div dynamically using jQuery depending on screen size

I have a bootstrap carousel. Here if window width i more than 400px, I need to show all inner divs in same item. But if the window width is less than 400px, I need to show every 3 inner divs in
one <div class="item">. I have this code:
function item_wrap() {
var width = $(window).width();
console.log(width);
if (width > 400) {
$('.inner').unwrap();
$('.inner').wrapAll('<div class="item active">');
} else {
$('.inner').unwrap();
$('.inner:lt(3)').wrapAll('<div class="item active">');
$('.inner:gt(2)').wrapAll('<div class="item">');
}
}
item_wrap();
$(window).resize(function() {
item_wrap();
});
.item {
background: #ccc;
}
.active {
color: red
}
.inner {
float: left;
width: 20%;
border: 1px solid black;
margin: 2px;
}
#media screen and (max-width: 400px) and (min-width: 300px) {
.inner {
width: 30%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div>
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
<div class="inner">12</div>
</div>
</div>
<a class="carousel-control left-carousel" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="display:block"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control right-carousel" href="#myCarousel" role="button" data-slide="next" style="background: inherit !important;display: block;height: auto;opacity: 0.5;right: -4%;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
If window width is greater than 400px it is working correctly. But if the window width is less than 400px the first 3 inner divs are showing correct
but other inner div are not correctly wrappped in <div class="item">
what i need is if in window width less than 400px then first 3 inner
div is need wrap in <div class="item active"> and all other ecah 3
inner div is need to wrap in <div class="item">.
ie , if window width less than 400px i need to get the following structure
<div class="carousel-inner" role="listbox">
<div>
<div class="item-active">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
<div class="item">
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
</div>
<div class="item">
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
</div>
<div class="item">
<div class="inner">10</div>
<div class="inner">11</div>
<div class="inner">12</div>
</div>
</div>
</div>
Please help to solve this .

Try this
<script type="text/javascript">
function item_wrap(){
var width = $(window).width();
console.log(width);
if(width > 400) {
$('.inner').unwrap();
$('.inner').wrapAll('<div class="item active">');
} else {
$('.inner').unwrap();
var divs = $(".inner");
for(var i = 0; i < divs.length; i+=3) {
if(i===0){
$('.inner:lt(3)').wrapAll('<div class="item active">');
}
else{
divs.slice(i, i+3).wrapAll("<div class='item'></div>");
}
}
}
}
item_wrap();
$(window).resize(function(){
item_wrap();
});
</script>

Idea
Here's the code that works. The idea is that you loop through the remaining items after the first three, taking three items at a time, and wrap them into the div. Then take the next three and wrap them again, and so forth.
Main code:
for (var i = 0; i < others.length; i += 3) {
var nextThree = [others[i], others[i+1], others[i+2]]'
$(nextThree).wrapAll('<div class="item">');
}
Full code:
function item_wrap() {
var width = $(window).width();
console.log(width);
if (width > 400) {
$('.inner').unwrap();
$('.inner').wrapAll('<div class="item active">');
} else {
$('.inner').unwrap();
var firstThree = $('.inner:lt(3)');
var others = $('.inner:gt(2)');
$(firstThree).wrapAll('<div class="item active">');
for (var i = 0; i < others.length; i += 3) {
var nextThree = [others[i], others[i+1], others[i+2]]'
$(nextThree).wrapAll('<div class="item">');
}
}
}
item_wrap();
$(window).resize(function() {
item_wrap();
});
.item {
background: #ccc;
}
.active {
color: red
}
.inner {
float: left;
width: 20%;
border: 1px solid black;
margin: 2px;
}
#media screen and (max-width: 400px) and (min-width: 300px) {
.inner {
width: 30%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div>
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
<div class="inner">12</div>
</div>
</div>
<a class="carousel-control left-carousel" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="display:block"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control right-carousel" href="#myCarousel" role="button" data-slide="next" style="background: inherit !important;display: block;height: auto;opacity: 0.5;right: -4%;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

Bootstrap 3: Hidding carousel controls on first and last items not working

I did get the JS code from: netgloo
JS:
var checkitem = function() {
var $this;
$this = $("#");
if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#diapos .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#diapos").on("slid.bs.carousel", "", checkitem);
HTML:
<div id="diapos" class="carousel paper2 slide" data-ride="carousel">
<!-- diapos -->
<div class="carousel-inner" role="listbox">
<div class="overlay"></div>
<div class="item active" id="first">
<img src="img/01.jpg" alt="...">
</div>
<div class="item" id="second">
<img src="img/02.jpg" alt="...">
</div>
<div class="item" id="last">
<img src="img/03.jpg" alt="...">
</div>
</div>
</div>
<a class="left carousel-control" href="#diapos" 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" href="#diapos" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
The code is not hidding the respective controls.
There are no other carousels in the document.
By the way, what's the function of this piece of HTML?:
<div class="overlay"></div>

The id of the carousel div is "diapos". So this on the third line should be assigned to that, as 'left' and 'right' are its immediate children :
var checkitem = function() {
var $this;
$this = $("#diapos"); // this line needs to be changed
if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
//continue as before from here
Also, you probably forgot to close the 'diapos' div!