Develop Reference

Browser is assigning automatically value of a parameter of a function

I am facing a strange bug on javascript which I have tried different ways to solve it but in this case, it has beaten me. The idea of this code is to show the available gallery of photos when the user presses the element tag h5 '<h5 class="m" id="myelem">Galery of photos</h5>', then the website shows the galery with SweetAlert2 and Bootstrap.
So when I do click to the h5 element it runs the function called sweetCarousel which shows the gallery of photos. At this time I am calling the function in this way sweetCarousel.bind(this, ...) to receive the parameters, in this case, the URL from the photos.
I am injecting HTML code inside the Sweetalert. As a condition the HTML inside the alert changes depending on how many photos I want to show. The interesting thing which is happening is that when I only load one photo like this:
document.getElementById("myelem").addEventListener("click", sweetCarousel.bind(this, "./img/image1.jpg"));
The browser set the parameters value on this way:
img1 = "./img/image1.jpg", img2 = MouseEvent {isTrusted: true, screenX: 449, screenY: 442, clientX: 449, clientY: 339, …}, img3 = ""
So the first conditional if (img2.length == 0) { skips it and goes to the second conditional if (img3.length == 0) {.
I do not know why is happening this bug. I planned to evaluate the code in the first conditional as I only passed one image as a parameter
function sweetCarousel(img1, img2 = "", img3 = "") {
if (img2.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> </div> <!-- Controls --> </div></div>';
} else if (img3.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <!-- Controls --> <a class="left carousel-control" 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" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
} else {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <div class="item"> <img src="' + img3 +'"> </div> </div> <!-- Controls --> <a class="left carousel-control" 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" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
}
Swal.fire( {
html: eee,
width: '50%',
background: "black !important",
showCloseButton: true,
showCancelButton: false,
showConfirmButton: false,
focusConfirm: false
});
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});
}

This is the expected behavior. When you provide an event listener to the addEventListener() method, the listener must implement the EventListener interface.
So if you want to provide additional arguments to the listener, I suggest you to use closures.
document.getElementById("trigger1").addEventListener("click", eventListener( ["./img/image1.jpg"]).bind(this));
document.getElementById("trigger2").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg"]).bind(this));
document.getElementById("trigger3").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg","./img/image3.jpg"]).bind(this));
function eventListener(images){
return function(event){
console.log('images', images);
console.log('event', event);
}
}
<button id="trigger1">Trigger 1</button>
<button id="trigger2">Trigger 2</button>
<button id="trigger3">Trigger 3</button>
And also I suggest you to pass images as an array instead of passing them as separate arguments. By using array, you can replace if/else blocks with a loop to create a more generic function. Imagine that you will want to provide 50 images in future, then you will have to create 50 if/else blocks. You can do it as followings:
document.getElementById("trigger").addEventListener("click", eventListener(["./img/image1.jpg", "./img/image2.jpg", "./img/image3.jpg"]).bind(this));
function eventListener(images) {
return function(event) {
const indicators = images.map(function(image, index) {
return `
<li
data-target="#carousel-example-generic"
data-slide-to="${index}"
${index === 0 ? `class="active"` : ``}
></li>
`
})
const imageItems = images.map(function(image, index) {
return `
<div class="item ${index === 0 ? `active` : ``}">
<img src="${image}">
</div>
`
})
const carousel = `
<div class="">
<div class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
${indicators}
</ol>
<div class="carousel-inner" role="listbox">
${imageItems}
</div>
<!-- Controls --> <a class="left carousel-control" 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" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
`
console.log(carousel)
}
}
<button id="trigger">Trigger</button>

Bootstrap carousel not displaying newly created item

I have a div that uses a bootstrap carousel with ng-repeat. I also have a way to add items the current list of items.
So if I am in index 0 and I click the add button, I want to be able to slide to the new item.
Currently with what I have, the indexes seem to be set correctly but it just isn't sliding to the new item
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
$('#myCarousel').carousel($scope.currentIndex);
It just shows the data from item 1 still. But when I do try and click next, it then moves to that new item.
I have also tried it with $('#myCarousel').carousel('next'); which results in the same thing
Edit:
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in items">
// rest of the html
</div>
</div>
</div>

Can you post the html part? also begin with more than 1 slide so that you have at least 3 slides at the end just for debug.
Following your code i compiled something like this, don't know if it's what you are looking for
<body ng-app="cApp" ng-controller="myslides">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div ng-repeat="item in items" class="item" ng-class="{active:$index==currentIndex}" >
<div>{{item}}</div>
</div>
<h1>Hello Plunker!</h1>
</div>
<a class="left carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex!=0?currentIndex-1:items.length-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex<items.length-1?currentIndex+1:0" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<button class="btn btn-default" ng-click="addslide('another1')">add slide</button>
</body>
with the script
var app = angular.module('cApp', []);
app.controller('myslides', function($scope){
$scope.items = ['this is 1','this is 2'];
$scope.currentIndex = 0;
$scope.addslide=function(newItem){
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
};
});
Aldo if you are going to use angular, i personally prefer to use angularui that has a simple carousel with prebuild functions and you can still do some customizing.

How to add progress bar to bootstrap and different interval for each carousel item

How to add progress bar to bootstrap carousel and give each item different interval and preserve the on hover carousel pause characteristic?
I have try many time to combine both together, but it is not working smoothly, the jquery animate always run faster than setInterval, and i don't know how to stop the animate on progress bar when hover on the carousel.
Anyone know how to do this?
here is my work:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
...
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#php
$intervals = [
'1000', '2000', '3000', '4000'
];
#endphp
#foreach ($intervals as $interval_key => $interval)
<div class="item #if ($interval_key == 0) active #endif" data-interval="{{$interval}}" data-last-item="#if ((count($intervals) - 1) == $interval_key) true #else false #endif">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
{{$interval_key}}
</div>
</div>
#endforeach
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="progress_bar">
<div class="percentage">
</div>
</div>
here is my javascript:
var t;
var start = $('#myCarousel .carousel-inner .item.active').data('interval');
console.log(start);
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", (start - 1000));
$(".progress_bar .percentage").animate({'width':'100%'}, start);
$(".progress_bar .percentage").animate({'width':'0%'}, 30);
$('#myCarousel').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration =$('#myCarousel .carousel-inner .item.active').data('interval');
console.log(duration);
$('#myCarousel').carousel('pause');
t = setTimeout("$('#myCarousel').carousel();", (duration - 1000));
$(".progress_bar .percentage").animate({'width':'100%'}, duration);
$(".progress_bar .percentage").animate({'width':'0%'}, 30);
});
$('.carousel-control.right').on('click', function(){
clearTimeout(t);
});
$('.carousel-control.left').on('click', function(){
clearTimeout(t);
});

Bootstrap Carousel slide is not smooth for "NEXT" but smooth for "PREVIOUS"

I am using bootstrap as a framework for a website I am helping with. On the front page of the website is a carousel. For some odd reason, the carousel "slide" transition is very smooth when clicking on the left arrow (PREVIOUS); however it seems to go all weird when clicking the right arrow (NEXT)
I've tried looking online as well as in the bootstrap files (CSS and JS)
I cannot seem to find anything. I've tried re-copying the code from the bootstrap website for carousels. Not sure what's wrong.
URL: www.acebac.org
Help? :D

Here is JQuery code:
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: 5000,
pause: "false"
});
HTML code:
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- 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" role="listbox">
<div class="item">
<img src="img/bg.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg1.jpg" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg2.jpg" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" 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="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
See Demo:Demo Carousel Bootstrap

Align Bootstrap Carousel Image

I'm using a Bootstrap carousel to display images and their respective captions. The image can be portrait, landscape.
I'm able to correctly display landscape images in the carousel with their caption below. In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. I changed the CSS property in file bootstrap.min.css but it's not working.
CSS code...
.carousel-inner {
position: relative;
align: right;
width: 100%;
overflow: hidden;
Any idea how to align Portrait image to the right without affecting the other 2 images?
The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.
HTML Code..
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></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" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

i have created code pen for similar carousel slider. have a look at once it may helpful for you.
<head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="carosel-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>First slide </h3>
<p> ContentContentContentContentContentContent</p>
</div>
</div>
<div class="item">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>Content</p>
</div>
</div>
<div class="item">
<img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>Content</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
///// CSS code goes here
.carousel-caption {
color: #000;
}.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
////////////// JS CODE
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});
http://codepen.io/srinivasr/pen/EPdxKG