We Keep Coding

Carousel thumb slider stop clone when item less than 3

I am using bootstrap carousel slider now my slider repeating all times . I need to stop repeating item when item count less than 3. I have tried below script. Anyone help me to achieve this.
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
</div>
</div>
</div>
<div class="clearfix">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /myCarousel -->
</div>
<!-- /clearfix -->
Script I was tried for 3 items. But I don't know how to write up for 2 and 1 items with simplified script.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.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)).addClass('rightest');
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
} else {
//what to be here
}
my code here

This one working for me.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.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)).addClass('rightest');
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
}
else {
//alert("hello");
(function(){
$('.carousel .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<2;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
//listener for after slide
jQuery('.carousel').on('slid.bs.carousel', function(){
//Each slide has a .item class to it, you can get the total number of slides like this
var totalItems = jQuery('.carousel .item').length;
//find current slide number
var currentIndex = jQuery('.carousel .item div.active').index() + 1;
//if slide number is last then stop carousel
if(totalItems == currentIndex){
clearInterval(jQuery('.carousel .item').data('bs.carousel').interval);
} // end of if
});
}
});
}());
}

How can I make my Slideshow Indicators change their style with my current code?

I have had an issue with placing slideshows in my website. I require more than one slideshow on the same page which has led to multiple problems with the scrolling and such. I finally came across a solution which works almost perfectly however, the indicators do not change color to reflect the current slide.
var w3 = {};
w3.slideshow = function (sel, ms, func) {
var i, ss, x = w3.getElements(sel), l = x.length;
ss = {};
ss.current = 1;
ss.x = x;
ss.ondisplaychange = func;
if (!isNaN(ms) || ms == 0) {
ss.milliseconds = ms;
} else {
ss.milliseconds = 1000;
}
ss.start = function() {
ss.display(ss.current)
if (ss.ondisplaychange) {ss.ondisplaychange();}
if (ss.milliseconds > 0) {
window.clearTimeout(ss.timeout);
ss.timeout = window.setTimeout(ss.next, ss.milliseconds);
}
};
ss.next = function() {
ss.current += 1;
if (ss.current > ss.x.length) {ss.current = 1;}
ss.start();
};
ss.previous = function() {
ss.current -= 1;
if (ss.current < 1) {ss.current = ss.x.length;}
ss.start();
};
ss.display = function (n) {
w3.styleElements(ss.x, "display", "none");
w3.styleElement(ss.x[n - 1], "display", "block");
}
ss.start();
return ss;
};
<html>
<script src="w3.js"></script>
<body>
<div id="2" class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-content w3-display-container w3-center">
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Second slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Third slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Fourth slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<div class="w3-center w3-container w3-section w3-large w3-text-grey" style="width:100%">
<span class="w3-left w3-hover-text-blue fa fa-arrow-left" onclick="myShow2 .previous()"></span>
<span class="w3-right w3-hover-text-blue fa fa-arrow-right" onclick="myShow2 .next()"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(1)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(2)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(3)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(4)"></span>
</div>
</div>
</div>
<script> myShow2 = w3.slideshow(".Slide2", 0); </script>
</div>
</body>
</html>
So the code works well and does what I want except I'm not sure how to make the circle indicators change to blue to reflect the current slide. I have tried completely different approaches except this is the only one that allows multiple slideshows on the same page. Could some please explain to me how I would go about making the circles stay blue when clicked and revert when another is clicked?

I have found a solution to my problem. First I added an extra variable to call a function <script> myShow4 = w3.slideshow(".Slide4", 0, "demo4"); </script>
the "demo4" will be used to find the indicator dots. <span class="fa fa-circle demo4 w3-hover-text-blue w3-transparent" onclick="myShow4 .display(4)"></span>each indicator has the specific class.
`ss.display = function (n) {
ss.current = n;
w3.styleElements(ss.x, "display", "none");
w3.styleElement(ss.x[n - 1], "display", "block");
ss.indicator(demo);
}
ss.indicator = function(n) {
var dots = document.getElementsByClassName(n);
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-text-blue", "");
}
x[ss.current-1].style.display = "block";
dots[ss.current-1].className += " w3-text-blue";
}`
This is the new code in the JS file. on click the display function is called and I edited the function to also call the indicator function which changes the current slide relevant dot to blue while changing the rest to nothing or how they were before. This solution worked for me, adding another function within the called function.

Bootstrap Carousel with different hashtag URL ID

I have created a separate URL for each slide of the Bootstrap Carousel. However, it currently uses numbers with a hashtag in the following way:
domain.net/pride#1
domain.net/pride#2
domain.net/pride#3
Is there a way I can have it change to what I want? Something like:
domain.net/pride#events
domain.net/pride#press
domain.net/pride#schedule
Thank You.
<script>
var url = document.location.toString();
if (url.match('#')) {
// Clear active item
jQuery('.carousel-inner div').removeClass('active');
// Activate item number #hash
var index = url.split('#')[1];
jQuery('.carousel-inner div:nth-child(' + index + ')').addClass('active');
}
jQuery('#PrideCr').bind('slid', function (e) {
// Update location based on slide (index is 0-based)
var item = jQuery('#PrideCr .carousel-inner .item.active');
window.location.hash = "#"+parseInt(item.index()+1);
})
</script>

2) by the data-name attribute
http://glebkema.ru/tasks/so-38407398.html
var url = document.location.toString();
if (url.match('#')) {
// Clear active item
$('#PrideCr .item.active').removeClass('active');
// Activate item number #hash
var index = url.split('#')[1];
$('#PrideCr .item[data-name="' + index + '"]').addClass('active');
}
$('#PrideCr').on('slid.bs.carousel', function () {
// Update location based on slide
var item = $(this).find('.item.active').data('name');
if (item) window.location.hash = "#" + item; // Doesn't work on SO
console.log(item);
})
.carousel-inner img {
height: auto;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="PrideCr" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div data-name="events" class="item active">
<img src="http://placehold.it/600x150/c69/f9c/?text=events" alt="">
</div>
<div data-name="press" class="item">
<img src="http://placehold.it/600x150/9c6/cf9/?text=press" alt="">
</div>
<div data-name="schedule" class="item">
<img src="http://placehold.it/600x150/69c/9cf/?text=schedule" alt="">
</div>
</div>
<a class="left carousel-control" href="#PrideCr" 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="#PrideCr" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
1) by the id attribute
I guess you can add the id attribute to carousel's items and use this attribute in your script. Something like this:
<div class="carousel-inner" role="listbox">
<div id="events" class="item active">
<img src="..." alt="...">
</div>
<div id="press" class="item">
<img src="..." alt="...">
</div>
<div id="schedule" class="item">
<img src="..." alt="...">
</div>
</div>
<script>
var url = document.location.toString();
if (url.match('#')) {
// Clear active item
jQuery('#PrideCr .item.active').removeClass('active');
// Activate item number #hash
var index = url.split('#')[1];
jQuery('#' + index).addClass('active');
}
jQuery('#PrideCr').bind('slid', function (e) {
// Update location based on slide
var item = jQuery('#PrideCr .item.active').attr('id');
if (item) window.location.hash = "#" + item;
})
</script>

hover over one element and addClass to other elem in Angular JS

Attempting with the below jQuery method: But this does not work in my Angular environment, assuming because I'm attempting to do this outside of angular JS scope methods, but I don't know how to implement this using Angular scope methods (new to angular) any advice?
$('.song-thumb .hover-play').on('mouseenter', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.addClass('hoverclass');
});
$('.song-thumb .hover-play').on('mouseleave', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.removeClass('hoverclass');
});
var count = 0;
$('section.suggestedAlbums img').hover(function() {
count++;
$('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
});
Full page code:
<script>
$('.song-thumb .hover-play').on('mouseenter', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.addClass('hoverclass');
});
$('.song-thumb .hover-play').on('mouseleave', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.removeClass('hoverclass');
});
var count = 0;
$('section.suggestedAlbums img').hover(function() {
count++;
$('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
});
</script>
<!-- <h2>{{trackListData.listTitle}}</h2>
--><div ng-repeat="track in trackListData.tracks track by $index " class="feature-item-homepage fade-animate-nostagger">
<div class="song-thumb" ng-class="{active: $root.currentPlaying.song_id == track.id}">
<!--3 Cases-->
<!--Not the song being played-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);">
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-play play-song"></i>
<img src="img/producer_icon_white.png" class="prod_logo">
<div class="song-title" style="width: 80%;padding-top:25px;">
<a class="song-linking" href="#/song/{{track.id}}">
<h4>{{track.title}}</h4>
<h5>{{track.artist.user_name}}</h5>
</a>
</div>
</div>
<!--The current song but paused-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && !$root.isPlaying" play-music>
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-play play-song"></i>
</div>
<!--The current song but playing-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && $root.isPlaying" pause-music>
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-pause pause-song"></i>
</div>
<img ng-src="{{(track.albums[0].album_picture? $root.fileServer +'uploads/' + track.albums[0].album_picture:(track.artist.profile_picture? $root.fileServer +'uploads/' + track.artist.profile_picture:'img/defaultalbum.png'))}}" />
</div>
<!-- <div class="song-title-wrap">
<div class="song-title">
<a class="song-linking" href="#/song/{{track.id}}">
<h4>{{track.title}}</h4>
<h5>{{track.artist.user_name}}</h5>
</a>
</div>
</div> -->
</div>

Add a controller to a containing div:
<div ng-controller='MyController'>
Add ngMouseleave and ngMouseenter to the .song-thumb .hover-play element
<div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);" ng-mouseenter='state.hoverPlay=true;' ng-mouseleave='state.hoverPlay=false'>
Add the controller
angular.controller('MyController', [ '$scope', function ($scope) {
$scope.state = {
hoverPlay: false
};
}]);
Use ngClass to add/remove the class
<img ng-class="{ 'hoverclass': state.hoverPlay }" . . . >

lazy load not work in bootstrap carousel

I create carousel using bootstrap 3 like this :
HTML :
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://rivathemes.net/html/envor/img/posts/3.jpg" class="img-big">
</div>
<div class="item">
<img data-lazy-load-src="http://rivathemes.net/html/envor/img/posts/4.jpg" class="img-big">
</div>
</div>
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-angle-double-left fa-lg"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-angle-double-right fa-lg"></i></a>
</div>
</div>
and add this code for add img lazy load.
JS :
$('#myCarousel').on('slid', function () {
var $nextImage = $('.active.item', this).next('.item').find('img');
$nextImage.attr('src', $nextImage.data('lazy-load-src'));
});
But, This not work for me!? can do fix this ?
Important Q: can i add image preloader for lazy load?!
DEMO : FIDDLE

The answer by dm4web does not account for skipping slides by directly clicking the carousel indicators. This version correctly loads an image regardless of how you slide to it, using Bootstrap's event.relatedTarget (the item being slid into place, see the official documentation). Try running the snippet below and clicking on the indicators to switch several slides ahead.
var cHeight = 0;
$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
var $nextImage = $(e.relatedTarget).find('img');
$activeItem = $('.active.item', this);
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// prevents the loaded image if it is already loaded
var src = $nextImage.data('lazy-load-src');
if (typeof src !== "undefined" && src != "") {
$nextImage.attr('src', src)
$nextImage.data('lazy-load-src', '');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/5000x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5001x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5002x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5003x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5004x1000">
</div>
</div>
<!-- Controls -->
<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>
</div>

http://jsfiddle.net/ys4je40u/
add lazy-load class to item object
use slide.bs.carousel event
CSS:
.lazy-load {
background: url("http://www.mozart.it/images/preloader.gif") center center no-repeat;
}
JQ:
var cHeight = 0;
$('#myCarousel').on('slide.bs.carousel', function (e) {
var $nextImage = null;
$activeItem = $('.active.item', this);
if (e.direction == 'left'){
$nextImage = $activeItem.next('.item').find('img');
} else {
if ($activeItem.index() == 0){
$nextImage = $('img:last', $activeItem.parent());
} else {
$nextImage = $activeItem.prev('.item').find('img');
}
}
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// prevents the loaded image if it is already loaded
var src = $nextImage.data('lazy-load-src');
if (typeof src !== "undefined" && src != "") {
$nextImage.attr('src', src)
$nextImage.data('lazy-load-src', '');
}
});

If you have multiple images in your slide, you have to use this :
var cHeight = 0;
$('#carousel').on('slide.bs.carousel', function (e) {
var $nextImage = null;
$activeItem = $('.active.item', this);
if (e.direction == 'left'){
$nextImage = $activeItem.next('.item').find('img');
} else {
if ($activeItem.index() == 0){
$nextImage = $('img:last', $activeItem.parent());
} else {
$nextImage = $activeItem.prev('.item').find('img');
}
}
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// => Changes here !
// prevents the loaded images if it is already loaded
$nextImage.each(function(){
var $this = $(this),
src = $this.data('original');
if (typeof src !== "undefined" && src != "") {
$this.attr('src', src)
$this.data('original', '');
}
});
});

Created this "kinda generic" solution some months ago and had no issues so far...
var $ajaxCarousel = $('.carousel-ajax');
if ($ajaxCarousel.length > 0) {
$ajaxCarousel.on('slide.bs.carousel', function (e) {
var $upcomingImage = $(e.relatedTarget).find('img');
if (typeof $upcomingImage.attr('src') === 'undefined') {
$upcomingImage.attr('src', $upcomingImage.data('src'));
}
});
// preload first image
$ajaxCarousel.each(function() {
var $firstImage = $(this).find('[data-slide-number=0]').find('img');
$firstImage.attr('src', $firstImage.data('src'));
});
}
All you have to do in HTML is add "carousel-ajax" class to your existing carousel and prepend "data-" in front of your img's src tags:
<img data-src="..." />