jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget.
License: MIT License
This is the original version of jCarouselLite. Current stable version is 1.1. For detailed documentation visit the Project Page
The test.html file , jquery-2.1.4.js and jquery.jcarousellite.js and four images into my folder , but seam not working.
<!DOCTYPE html>
<html>
<title>Test jquery - jcarousellite</title>
<head>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="jquery.jcarousellite.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$(".carousel").jCarouselLite({
auto: 800,
speed: 1000
});
});
</script>
<div class="carousel">
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
</div>
</body>
</html>
Is there a way to flip 4 at a time instead of only 1 column on vertical or 1 row?
I would like to have 4 items slide at any time.
regards.
When using it to display text, specifically user comments, the comments will be truncated if a fixed height is specified in css.
would be great if jcarousel could make carousel responsive, with options to control the item quantity depending on the screen
Hi,
It would be great to be able to swipe the carousel on mobile devices and tablets.
Is this feature going to be available in future updates?
Diamond.
Hi!
I would just like to request that when reaching the end of the carousel on circular false to provide a class that would allow me to style the button when the user has reached the end of the carousel.
EDIT: just realized this could be a bug, I see the class on the prev button on init, but navigating around doesn't change it :(
Thanks!
Hi,
how to I scroll to a certain slide by index?
for example:
var slider = $('.carousel').jCarouselLite({
btnNext: '.next',
btnPrev: '.prev',
visible: 4
});
slider.go(3);I have made simple carousel here http://katalog.akenoo.ru/test and it works only once - only first click on Next button causes scrolling. Other clicks on Next/Prev have no effect.
How can I fix it?
Is there a way I can specify other tags like divs or classes instead of UL -> LI to define the items?
Hi, i hope someone can help me with this, thanks in advance.
jQuery(document).ready(function($) {
var start_mobile_size = 960;
if($('body').hasClass('isphone')) { var isphone = true; }
if ( $.isFunction($.fn.jcarousel) ) {
var jcarousel = $('.slider');
jcarousel.on('jcarousel:reload jcarousel:create', function () {
var jcarouselwidth = jcarousel.innerWidth();
if (jcarouselwidth >= 1200) {
jcarouselwidth = jcarouselwidth / 6;
} else if (jcarouselwidth >= 800) {
jcarouselwidth = jcarouselwidth / 5;
} else if (jcarouselwidth >= 700) {
jcarouselwidth = jcarouselwidth / 4;
} else if (jcarouselwidth >= 500) {
jcarouselwidth = jcarouselwidth / 3;
} else if (jcarouselwidth >= 350) {
jcarouselwidth = jcarouselwidth / 2;
}
jcarousel.jcarousel('items').css('width', jcarouselwidth + 'px');
})
.jcarousel({
wrap: ''
});
$('.slider-control-prev').jcarouselControl({ target: '-=3' });
$('.slider-control-next').jcarouselControl({ target: '+=3' });
$('.header-slider-pagination').on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
}).on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
}).on('click', function(e) {
e.preventDefault();
}).jcarouselPagination({
perPage: 1,
item: function(page) {
return '<a href="#' + page + '">' + page + '</a>';
}
});
}//if function jcarousel
$('.headerlang').change(function() {
var lang = $(this).val();
$.cookie('sitelang', lang, { expires: 60, path: '/' });
location.reload();
});
$('.country-list li .iconcountries').click(function(){
if($(this).hasClass('icon-down-dir')) {
$(this).parent().find("ul").slideDown('fast');
$(this).removeClass("icon-down-dir").addClass("icon-up-dir");
} else {
$(this).parent().find("ul").slideUp('fast');
$(this).removeClass("icon-up-dir").addClass("icon-down-dir");
}
});
select_payment_gateway();
$('input[name=paymentgateway]').change(function() {
select_payment_gateway();
});
function select_payment_gateway() {
var id = $('input[name=paymentgateway]:checked').attr('id');
$('input[name=paymentgateway]').parent().removeClass("selected");
$('#'+id).parent().addClass("selected");
$('.gateway_options').hide();
$('.'+id+'_options').show();
if(id == 'other') {
$('.paymentplanmanualoptions').show();
} else {
$('.paymentplanmanualoptions').hide();
}
if(id == 'none') {
$('.allpaymentoption').hide();
} else {
$('.allpaymentoption').show();
}
}
hide_vip_payment_options();
$('#paymentvipunlock').change(function() {
hide_vip_payment_options();
});
function hide_vip_payment_options() {
var id = $('#paymentvipunlock').val();
if(id == "yes") {
$('.paymentvipoptions').fadeOut();
} else {
$('.paymentvipoptions').fadeIn();
}
}
var settings = {};
//clone content and place in the div that are only seen on a mobile device
$('.countries').clone().prependTo(".left-mobile-sidebar");
$('.header-menu').clone().appendTo( ".left-mobile-sidebar" );
//place current country and city in the mobile country dropdown button
var selected_country = $('.current_page_item_country .sidebar-country-link').html();
var selected_city = $('.current_page_item_city a').html();
if(selected_country) {
$('.left-mobile-sidebar .selected-location span').html('').append(selected_country);
}
if(selected_city) {
$('.left-mobile-sidebar .selected-location span').append('<span class="icon icon-angle-right"></span>'+selected_city);
}
//place the first dropdown menu name in the mobile menu
var t = $('.sidebar-right .dropdownlinks-dropdown h4').first().text();
if(t) {
$('.show-right-mobile-sidebar .label-for-icon').html(t);
}
//add an arrow next to links that have sublinks
$('.left-mobile-sidebar li').each(function() {
if ( $(this).children('ul').size() > 0 ) {
$(this).find('a:first').append('<span class="icon-angle-right"></span>');
$(this).find('ul li a').prepend('- ')
}
});
$('.left-mobile-sidebar .current_page_item_city').parent('ul').show();
$('.right-mobile-sidebar .sidebar-right').css('width', '');
function prepare_responsive() {
var headerwidth = $(window).width();
if(isphone || headerwidth <= start_mobile_size) {
window.isMobile = true;
} else {
window.isMobile = false;
}
if(!settings.added_classes && (isphone || headerwidth <= start_mobile_size)) {
$('header .topnav').addClass('mobile-topnav').removeClass('topnav'); //preparing the header navigation for mobile view
$('.mobile-topnav').css('padding-top', $('.mobile-menu').height());
$('.mobile-menu').slideDown();
$('.social').clone().prependTo(".left-mobile-sidebar");
$('.move-to-mobile-sidebar').clone().prependTo(".right-mobile-sidebar");
$('.right-mobile-sidebar .move-to-mobile-sidebar').addClass('sidebar-right');
settings.added_classes = "1";
} else if(settings.added_classes && headerwidth > start_mobile_size) {
$('header nav').addClass('topnav').removeClass('mobile-topnav').css('padding', '');
settings.added_classes = '';
$('.mobile-menu').hide('fast');
}
//hide top mobile menu on scroll down and show on scroll up
if((isphone || headerwidth <= start_mobile_size) && !settings.right_panel_active && !settings.left_panel_active) {
$('.mobile-menu').scrollupbar();
}//if headerwidth <= 960
if(settings.left_panel_active == 1 || settings.right_panel_active == 1) {
$('body').css({"width":$(window).width()});
}
if(isphone || headerwidth <= start_mobile_size) {
//auto stretch social and subnav li elements to fit the screen
$('header .subnav li').css('width', (headerwidth / $('header .subnav-menu li').length)+'px');
$('.left-mobile-sidebar .social li').css('width', ($('.left-mobile-sidebar').width() / $('header .social li').length)+'px');
} else {
$('header .subnav li').css('width', '');
$('header .social li').css('width', '');
}
if(isphone || headerwidth <= start_mobile_size) {
//responsive images in profile page
//only show the images if they are in viewport
if($('.bigimage').length && $('.lockedsection').length) {
$('.bigimage').addClass('col100').show();
}
function show_profile_images() {
if($('.mobile-ready-img').length) {
$('.mobile-ready-img').each(function() {
if(isElementInViewport($(this)) && (!$(this).attr('src') || $(this).attr('src') != $(this).data('responsive-img-url'))) {
$(this).css('opacity', '0').attr('src', $(this).data('responsive-img-url')).fadeTo('slow', 1);
}
});
}
}
show_profile_images();
$(window).scroll(function(event){
if(isphone || headerwidth <= start_mobile_size) {
show_profile_images();
}
});
$('a[rel=profile-photo]').click(function(event) {
event.preventDefault();
});
var mobile_text = $('.profile-page-no-photos .for-browsers').data('mobile-text');
var original_text = $('.profile-page-no-photos .for-browsers').data('original-text', $('.profile-page-no-photos .for-browsers').html()).find('p').text(mobile_text);
} else {
if($('.bigimage').length && $('.lockedsection').length) {
$('.bigimage').removeClass('col100').show();
}
if($('.mobile-ready-img').length) {
$('.mobile-ready-img').each(function() {
if($(this).attr('src') != $(this).data('original-url')) {
$(this).attr('src', $(this).data('original-url'));
}
});
};
$('.profile-page-no-photos .for-browsers').html($('.profile-page-no-photos .for-browsers').data('original-text'));
//only show pop-up images on click on a big browser
if ($.isFunction($.fn.fancybox)) {
$("a[rel=profile-photo]").fancybox({
beforeShow : function() { this.title = '' + (this.index + 1) + ' / ' + this.group.length + (this.title ? ' - ' + this.title : ''); }
});
}
}//responsive images in profile page
if(isphone || headerwidth <= start_mobile_size) {
//add touch capabilities to the header slider
$('.jcarousel').jcarouselAutoscroll({
autostart: true
});
$('.jcarousel').jcarouselAutoscroll({
autostart: true
});
//create navigation for front-page slider for premium and normal profiles
//count the number of profiles and add the same number of link in the pagination div
$('.mobile-profiles-slider .slider-pagination').each(function(index, el) {
if(!$(this).html()) {
var profiles = $(this).siblings('.girl').length;
if(profiles > 1) {
for (var i = 1; i <= profiles; i++) {
$(this).append('<a href="#'+i+'">'+i+'</a>');
}
$(this).find('a:first').addClass('active');
}
}
});
//switch images on pagination click
$('.mobile-profiles-slider .slider-pagination a').click(function(event) {
event.preventDefault();
$(this).parent().find('a.active').removeClass('active');
$(this).addClass('active');
$(this).parents('.mobile-profiles-slider').find('.girl').hide();
$(this).parents('.mobile-profiles-slider').find('.girl:eq('+(event.target.text - 1)+')').show();
});
//front-page hide all profiles except the first one in the list
$('.mobile-profiles-slider').each(function(index, el) {
$(this).find('.girl:visible').slice(1).hide();
});
//front-page hide all reviews except the first one
if($('.onereviewtext-homepage')) {
$('.onereviewtext-homepage:visible').slice(1).hide();
}
//swipeleft on frontpage body profiles list
$('.mobile-profiles-slider').on( "swipeleft", function(event) {
if(!$(this).find('.girl:last').is(':visible')){
$(this).find('.girl:visible:first').hide().nextAll('.girl:hidden:first').show();
$(this).find('.slider-pagination .active').removeClass('active').next('a').addClass('active');
} else {
var div = $(this).find('.girl:visible:first');
var divwidth = $(this).find('.girl:visible:first').width();
$(div).find('.thumb').animate({
width: (divwidth - (divwidth*0.2)), //we shrink the div by 20% to show the visitor that he's at the last image
},
100, function() {
$(this).animate({width: '100%'}, 100);
});
}
}); //swipe right to left
//swiperight on frontpage body profiles list
$('.mobile-profiles-slider').on( "swiperight", function(event) {
if(!$(this).find('.girl:first').is(':visible')){
$(this).find('.girl:visible:first').hide().prevAll('.girl:hidden:first').show();
$(this).find('.slider-pagination .active').removeClass('active').prev('a').addClass('active');
} else {
var div = $(this).find('.girl:visible:first');
var divwidth = $(this).find('.girl:visible:first').width();
$(div).find('.thumb').css('float', 'right').animate({
width: (divwidth - (divwidth*0.2)),//we shrink the div by 20% to show the visitor that he's at the first image
},
100, function() {
$(this).animate({width: '100%'}, 100, function(){
$(this).css('float', 'left');
});
});
}
}); //swipe left to right
} else {
$('.mobile-profiles-slider .girl').show();
}
if(!isphone || headerwidth > start_mobile_size) {
if(settings.left_panel_active == 1) {
mobile_sidebar('left','hide');
}
if(settings.right_panel_active == 1) {
mobile_sidebar('right','hide');
}
}
}//function prepare_responsive()
var headerwidth = $(window).width();
prepare_responsive();
$(window).resize(function(){
prepare_responsive();
});
//show the sidebar for mobile when clicking the icon in the top menu
$('.show-left-mobile-sidebar').click(function() {
mobile_sidebar('left','show');
});
$('.show-right-mobile-sidebar').click(function() {
mobile_sidebar('right','show');
});
//hide the sidebars for mobile when clicking outside the sidebar
$('.mobile-sidebar-content-overlay').click(function() {
if(settings.left_panel_active == 1) {
mobile_sidebar('left','hide');
}
if(settings.right_panel_active == 1) {
mobile_sidebar('right','hide');
}
});
//hide child menus in left mobile sidebar
$('.left-mobile-sidebar li a').click(function(click) {
if ( $(this).parent().children('ul').size() > 0 && $(this).parent().children('ul').is(':hidden') ) {
$('.left-mobile-sidebar li ul').slideUp();
$(this).parent().children('ul').slideDown();
click.preventDefault();
}
})
//hide/show country list when clicking the country dropdown
$('.left-mobile-sidebar .countries .selected-location').click(function() {
$('.left-mobile-sidebar .countries .country-list').slideToggle('slow');
});
$(".sidebar-right .dropdownlinks-dropdown h4").click(function(){
$(this).parent().find('ul').stop().slideToggle('fast');
});
function mobile_sidebar(sidebar, state) {
if(sidebar == 'right'){
var sidebarclass = '.right-mobile-sidebar';
} else {
var sidebarclass = '.left-mobile-sidebar';
}
if(state == 'show'){
var sidebarwidth = $(sidebarclass).width();
$('.mobile-menu').slideUp('fast');
if(sidebar == 'right'){
var bodyanimate = { 'right': sidebarwidth };
} else {
var bodyanimate = { 'left': sidebarwidth };
}
$('body').css({"width":($(window).width() - 20),"position":"absolute", "overflow-x":"hidden"}).animate(bodyanimate, 400);
$('.mobile-sidebar-content-overlay').css({ opacity: 0 }).show().fadeTo('slow', 0.7);
$(sidebarclass).show().css(sidebar, "-"+sidebarwidth+"px");
if(sidebar == 'right'){
var sidebaranimate = { 'right': "0" };
$(sidebarclass).find('.dropdownlinks-dropdown ul').first().show('slow');
} else {
var sidebaranimate = { 'left': "0" };
}
$(sidebarclass).css(sidebar, "-"+sidebarwidth+"px").animate(sidebaranimate, 400, function() {
if(sidebar == 'right'){
settings.right_panel_active = 1;
} else{
settings.left_panel_active = 1;
}
});
} else {
if(sidebar == 'right'){
var bodyanimate = { 'right': "0" };
} else {
var bodyanimate = { 'left': "0" };
}
$('body').animate(bodyanimate, 400, function(){
$('body').css({"width":"","position":"inherit", "overflow-x":"", "left":"", "right": ""});
});
$('.mobile-sidebar-content-overlay').hide();
$('.mobile-menu').slideDown('fast');
var sidebarwidth = $(sidebarclass).width();
if(sidebar == 'right'){
var sidebaranimate = { 'right': "-"+sidebarwidth };
} else {
var sidebaranimate = { 'left': "-"+sidebarwidth };
}
$(sidebarclass).animate(sidebaranimate, 400, function() {
$(sidebarclass+' li ul').hide();//hide all opened submenus
$(sidebarclass+' .country-list').hide(); //hide country list dropdown
$(sidebarclass).hide();
});
settings.right_panel_active = '';
settings.left_panel_active = '';
}
}
//right-sidebar js START
//escort js
$(".sidebar-right .buyfeatured").click(function(){
$('.buyfeatured_details').slideDown("fast");
});
$(".buyfeatured_details .closebtn_box").click(function(){
$('.buyfeatured_details').slideUp("fast");
});
$(".sidebar-right .buypremium").click(function(){
$('.buypremium_details').slideDown("fast");
});
$(".buypremium_details .closebtn_box").click(function(){
$('.buypremium_details').slideUp("fast");
});
//admin menu js
$(".manuallyactivatetour").click(function(){
$('.manuallyactivatetour_div').slideDown('fast');
$('.manuallyactivatevip_div').slideUp('fast');
});
$(".manuallyactivatevip").click(function(){
$('.manuallyactivatevip_div').slideDown('fast');
$('.manuallyactivatetour_div').slideUp('fast');
});
//escort menu shown to admin
$('.upgradebutton').click(function(){
$('.upgradebuttons').slideDown();
$('.upgradeescortbox').slideUp();
$(this).parent().siblings('.upgradeescortbox').slideDown('fast');
$(this).parent().slideUp('fast');
});
$('.upgradeescortbox .closebtn_box').click(function(){
if($(this).parent().siblings('.upgradebuttons')) {
$(this).parent().siblings('.upgradebuttons').slideDown('fast');
}
$(this).parent().slideUp('fast');
});
//agency js
$('.addescort').click(function(){
$('.addnewescortform').slideToggle("slow");
$('.addescort span').toggle();
});
$('.agencyeditbuttons a').click(function(){
var className = $(this).attr("class");
if(settings.added_classes == '1'){
mobile_sidebar('right','hide');
$('html, body').animate({ scrollTop: ($('.agency_options_'+className).parent().offset().top - $('.mobile-menu').height() - 5) }, 'fast');
}
$('.agency_options_dropdowns').slideUp();
$('.agency_options_'+className).slideDown();
$('.girlsingle').slideUp();
});
$('.agency_options_dropdowns .closebtn').click(function(){
$(this).parent().slideUp();
$('.girlsingle').slideDown();
});
//right-sidebar js END
//animate loader div
loader=function(l, nohtml){
if(!nohtml) {
$(l).html('<div class="loader rad3"><span class="rad3"></span></div>');
}
if($(l).find('.loader').is(':visible')){
$(l).find('.loader span').css('left', '-100%').animate({ 'left': '100%'}, 2000, function(){
loader(l, "no");
});
}
}
function isElementInViewport(el) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(el).offset().top;
var elemBottom = elemTop + $(el).height();
//return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
return ((elemTop >= docViewTop) && (elemTop <= docViewBottom) || (elemBottom >= docViewTop) && (elemBottom <= docViewBottom));
}
});
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0; i<ARRcookies.length;i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) {
return unescape(y);
}
}
}
Hi,
I'm using afterEnd and beforeStart callbacks in my carousel.
My carousel is auto, circular, let say it has item0 and item1 in it, the calls are received in the following order:
beforeStart(item1)afterEnd(item1)(pause)beforeStart(item0)afterEnd(item0)That's for version 1.1, in version 1.0.1 it used to be:
afterEnd(item0)beforeStart(item1)(pause)afterEnd(item1)beforeStart(item0)which is the expected behavior. I think this is a regression in version 1.1.
Regards,
Laurent.
Hi there,
I fell in love with your plugin the moment I saw it, with it being so lightweight and perfect for what I need it to do - just to scroll through product image thumbnails. :)
However, I've been trying to get it to work with Opencart but it only seems to scroll once, and that's it. You'll see what I mean here:- http://tinyurl.com/qy4ztyn
I've implemented your code as shown below:-
<div class="image-additional-left">
<button class="prev">«</button>
<button class="next">»</button>
<div class="carousel94">
<ul>
<?php foreach ($images as $image) { ?>
<li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox">
<img src="<?php echo $image['thumb']; ?>" width="120" height="120" "title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
</ul>
</div>
</div>
`<script type="text/javascript"><!--
$(function() {
$(".carousel94").jCarouselLite({
vertical: true,
visible: 4,
scroll: 1,
btnNext: ".next",
btnPrev: ".prev"
});
});//--></script>`
Am I missing something?
Just curious, does it work with jquery-1.7.1.min.js?
Hope you could help... Thanks!
Triggered when the destroy method is called.
for example: $(".any-class").jCarouselLite(destroy);
Nice work on jcarousellite so far :-)
It would be nice though to have some extra features for mobile, such as the ability to determine what length a swipe must be in order to iterate to the next item in the carousel. (Ex: Sliding a thumb 1 cm might not take you to the next picture, but you'd like it to do so).
Also, if there a way for it to detect vertical scroll action on a horizontal carousel, and pass that action to the main page. (Ex: Sliding the thumb downwards on the carousel in order to scroll down the page currently does not do so, rather it attempts to interpret it as a carousel swipe).
The plugin will no longer run with the newest version of JQuery. The fix is to use .length instead of .size()
I implemented vertical slider with this plugin using mousewheel,
I used following options, I don't want to circle elements,
<section class='slider' >
<div class="custom-container basic2">
<a href="#" class="prev">‹</a>
<div class="carousel">
<ul>
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
<li><img src="image/5.jpg"></li>
</ul>
</div>
<a href="#" class="next">›</a>
<div class="clear"></div>
</div>
</section>
<!-- It stuck inside above section with mousewheel-->
<section class='next-section' >
</section>javascript is as follows,
$(".carousal-outer .carousal-inner").jCarouselLite({
visible: 1,
vertical: true,
mouseWheel: true,
circular: false,
speed: 1000
});but at last list element of slide it stucks there, is there any option with which I can slide to next section(next to slider) after last slide
Where am I supposed to put the $function command? It is not showing up as code in Dreamweaver. I have screen shots of the code and the design. Also, it is curiously displaying the images vertically.
Your code:
function animateToPosition(animationOptions) {
running = true;
ul.animate(
animCss == "left" ?
{ left: -(calculatedTo_liSize) } :
{ top: -(calculatedTo_liSize) },
$.extend({
duration: options.speed,
easing: options.easing
}, animationOptions)
);
}
I think must remove the line: running = true.
If putting that line int that function, the next and prev button do not work because the running alway has true value.
I can't find class active for current slide.
I need to have number of cuurrent slide.
Hello,
To render this awesome plugin to the old Jquery 1.6 you just have to replace "done" with "complete" in the code :
animateToPosition({ // Animate carousel item to position based on calculated values. start: function() { running = true; }, complete: function() {//change here if(options.afterEnd) { options.afterEnd.call(this, visibleItems()); } if(options.auto) { setupAutoScroll(); } running = false; } });
Hello,
Could you please add a public method to be able to destroy the carousel. So for example when a user resizes the window I want to disable/destroy the carousel on small screens.
Thank you for a great plugin.
dear author! how to do pause than mouse hovers slides?
I'm currently working on a project that has a bug using circular to continuously scroll though slides. I have been searching for a work around for two days and the only thing I've found is setting it to false, which greatly reduces the appeal of this plugin.
I have a situation where I have custom css for the main slider div.
In the script (line 114) there is a hard coded setting for the 'left' css property.
This overrules my custom css and causes my layout to break.
My suggestion for a solution is to wither allow the user to turn off the setting or check automatically if left is already defined.
I solved the issue by simply removing line 114 :)
Как отображать картинки с разной шириной, чтобы не было накладок и отступов.
Hi,
I’m using jCarouselLite - v1.1 framework for carousel. Width of the carousel not getting auto adjust while doing resize the browser. Please help me to resolve this issue
Thanks in advance,
Rcoyajee
I have a problem with IE8 (works fine in all other browsers, even IE7): images don't slide to the correct position. They slide back and forth, jumping two images forward and backward ... I don't know why.
Is multiple carousels supported?
On my first pass at it, it seems to break both the existing carousels and the new one I am trying to create. I searched through the documentation and didn't find anything on it, but if I missed it, please point me in the right direction.
Hi. I'd like to help with this project if you are still interested in working on it.
Not an issue, but figured this may be the best way to track this request. I believe your carousel is superior to a lot others that are currently hosted on the de facto frontend package CDN cloudflare. Is there any chance you will be willing to put yours up there?
thanks!
this is in your website
start
You can specify from which item the carousel should start. Remember, the first item in the carousel has a start of 0, and so on.
I use your demo/ demo-01.html ,and modifed code:
origin:
$(".default .carousel").jCarouselLite({
btnNext: ".default .next",
btnPrev: ".default .prev"
});to:
$(".default .carousel").jCarouselLite({
start:7,//add this
btnNext: ".default .next",
btnPrev: ".default .prev"
});I found that the sequence of carousel was error when I click the prev/next btn.
then, I read the code,find this:
line 199~205
if(to <= options.start - numVisible - 1) {
newPosition = to + initialItemLength + options.scroll;
ul.css(animCss, -(newPosition * liSize) + "px");
calculatedTo = newPosition - options.scroll;
console.log("Before - Positioned at: " + newPosition + " and Moving to: " + calculatedTo);
}I think that options.start - numVisible - 1 has problem probably .
please reply me.
thank you ~~ ☺☺☺☺☺☺
Hi Ganesh,
I'm creating a new defect for this, as I'm not sure if you saw the comments I added in the issue you have closed earlier.
After testing my site, I noticed a weird behavior with the carousel. I'm not sure if it's related to the plugin or it's just a CSS issue. Please bear with me as my CSS skills are rubbish, so I can't really figure out what's wrong here.
When I implement the carousel, everything looks great on both desktop and mobile devices.
The issue happens when you try to reload the page. If I were to reload the page on my mobile device (both iPad and iPhone), I noticed that all the images in the carousel are overlapping against each other.
On the desktop, the issue happens intermittently (sometimes on page load, and sometimes on reload).
Is there some code in the plugin which may cause this behavior? Here's the page again:- http://tinyurl.com/mj7pde2.
Hope you could advise... thanks.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.