jQuery custom content scroller traversed path styling :)
-
21-12-2019 - |
Question
I creating custom content slider with jQuery custom content scroller and I need style its dragger. For example, if I drag it halfway - behind the red (any color) trail. Аnd vice versa. Thanks for any advice)
Example
(function($){
$(window).load(function(){
$("#content-1").mCustomScrollbar({
axis:"x",
advanced:{
autoExpandHorizontalScroll:true
}
});
var i=1,
imgs=["http://placehold.it/500x300.jpg","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300"];
$("a[rel='add-content']").click(function(e){
e.preventDefault();
var markup="<li id='img-"+i+"-container'><img src='"+imgs[i]+"' /></li>";
$(".content .mCSB_container ul").append(markup);
if(i<imgs.length-1){
i++
}else{
i=0;
}
});
$("a[rel='remove-content']").click(function(e){
e.preventDefault();
if($(".content .mCSB_container ul li").length<4){return;}
i--
if(i<0){i=imgs.length-1;}
$("#img-"+i+"-container").remove();
});
});
})(jQuery);
Here is JsFiddle DEMO
Solution
I hope its will be useful.
callbacks:{
whileScrolling: function(){
if(!$('.pathScrolled').length){$('.mCSB_scrollTools .mCSB_draggerRail').prepend('<div class="pathScrolled">'); }
$('.pathScrolled').css({width: this.mcs.draggerLeft});
}
}
See JsFiddle
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow