I have a logo slider where I need to implement infinite smooth scrolling without delay. Now there is a smooth scrolling, but there is still a delay and the slider stops. How can this be resolved?
An example of how it should be (slider with logos): https://www.seven-formation.com/
const logosSlider = new Swiper(".testimonials__logos", {
loop: true,
freeMode: true,
freeModeMomentum: false,
speed: 3000,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
});
I have a revolution slider carousel with a bullets navigation, that's the js configuration:
var revapi2;
tpj(document).ready(function() {
if(tpj("#rev_slider_2_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_2_1");
}else{
revapi2 = tpj("#rev_slider_2_1").show().revolution({
sliderType:"carousel",
jsFileLocation:"libs/revolutionSlider/js/",
dottedOverlay:"none",
sliderLayout: "auto",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
arrows: {
style:"",
enable:true,
hide_onmobile:false,
hide_under:300,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:30,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0
}
},
touch:{
touchenabled:"off",
swipe_treshold : 75,
swipe_min_touches : 1,
drag_block_vertical:true,
swipe_direction:"horizontal"
}
,
bullets: {
enable: true,
container:"slider",
hide_onmobile: false,
style: "ares",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "bottom",
h_offset: 20,
v_offset: 20,
space: 0,
rtl:false,
tmp: ''
}
},
carousel: {
horizontal_align: "center",
vertical_align: "center",
fadeout: "off",
maxVisibleItems: 3,
infinity: "on",
space: 0,
stretch: "off"
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"80%"
},
responsiveLevels:[1240,1024,778,320],
gridwidth:[1240,1024,778,320],
gridheight:[600,600,500,300],
lazyType:"none",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
shadow:0,
spinner:"off",
stopLoop:"on",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"on",
hideThumbsOnMobile:"on",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
});
The bullets appears over my carousel but what i can see is a strange behaviour. During navigation beetween slides, the .selected class is applied correctly to the right index only at the beginning of the sliding process. At the end , when the slide is stopped and loaded, the .selected class is automatic cleared from the correct index and applied to the index 0. I'll try to be more clear in my explaination:
slider with 4 element -> i click on the 3° bullet (the index 2)-> my image begin to slide in the view e my 3° bullet is red (red is the color that i have assigned to the .selected class)-> when the image slide animation is complete my 3° bullet return gray and my 1° bullet became red.
I have tried to intercept the event that cause this automatic change, but i have tried to log every events i have found in docs, and nothing is launched at the same time of my strange behaviour. It's a bug? How i can solve it?
I am trying to make a carouFredsel responsive carousel that should show a variable amount of elements depending on how many fit in the width. The problem I have is that whenever I set responsive to true, the elements get a 100% with and this is not what I need.
I managed to create a fiddle where I show:
1) a carousel with a 100% width that shows as many elements as they fit and when the browser window gets resized, more or less elements are shown
2) an item image that gets resized according to the size of the screen
I would like to combine 1 and 2 and have a carousel that behaves like 1 with elements that behave like 2.
It is not possible for me to know in advance how many items would fit (not even in percentage) since for each carousel the elements may have any width (though all of them have the same).
Is this possible ? What am I missing ?
http://jsfiddle.net/379zW/2/
var options = {
circular: true,
infinite: false,
auto : false,
responsive: false,
prev : {
button : "#p",
key : "left"
},
next : {
button : "#n",
key : "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);
This might solve your problem:
var options = {
circular: true,
infinite: false,
auto: false,
items: {
width: '100%',
height: 'variable',
visible: {
min: 1,
max: 999
}
},
responsive: false,
prev: {
button: "#p",
key: "left"
},
next: {
button: "#n",
key: "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);
I'm having trouble with a carousel.
I want to add a pause or a stop event to a carousel.
I already have built a slider, on the left side you have a navigation page for the sliders.
The slider starts automatically, I want it to stop if I choose a slide manually
Here's my code:
Thanks for any hints.
jQuery(this).parent().find('.navigation>ul>li').eq(0).addClass('active').end().each(function(){
jQuery(this).on('click', function(){
jQuery(this).parents('.csc-slider').find('.pager>a').eq(jQuery(this).index()).trigger('click');
return false;
});
});
var swidth = jQuery(this).width();
jQuery(this).find('img')
.width(swidth +'px !important')
.eq(0)
.imagesLoaded()
.done(function($images){
jQuery($images).parents('.slideshow')
.find('.item')
.css({display:'block', float:'left'})
.end()
.carouFredSel({
width: "100%",
height: "variable",
items: {
visible: 1,
height: "auto"
},
scroll: {
fx : "crossfade",
duration : 5000,
onAfter:function(data) {
var p = jQuery(this).parents('.csc-slider');
var i = p.find('.pager>a.selected').index();
p.find('li.active').removeClass('active');
p.find('.navigation>ul>li').eq(i).addClass('active');
}},
auto: {
pauseOnHover: "resume",
pauseOnEvent: true,
timeoutDuration: 5000,
},
prev: {
button: jQuery($images).parents('.csc-slider').find('.prev'),
},
next: {
button: jQuery($images).parents('.csc-slider').find('.next'),
},
pagination: jQuery($images).parents('.csc-slider').find('.pager'),
});
You can add a click event to navigation buttons to stop the auto scrolling:
$(".slider-pages .prev, .slider-pages .next, .slider-nav a").click(function(){
carouFredselObject.trigger("configuration", {auto: false});
});
When loading a page with the CarouFredSel image cycle it is always shifted a little to the right until I either go to the next image or reload the page, same issue happens after a hard refresh.
$( document ).ready(function() {
$(".photos").carouFredSel({
width: "100%",
height: "465px",
items: {
visible: 1,
width: "variable",
height: "465px"
},
scroll: {
fx: "none",
duration: 1
},
auto: 50000,
prev: {
button: ".prev",
key: "left"
},
next: {
button: ".next",
key: "right"
},
pagination: {
container: ".pagination",
keys: true
},
swipe: true,
mousewheel: true
})
});
http://coreytegeler.com/gl/music/
I've tried posting this several times before and no one has given me any info yet and it's really holding me up, and help would be so greatly appreciated.
I don't think it's a problem with your configuration of CarouFredSel. I made a jsfiddle of your code and it works fine.(http://jsfiddle.net/YdAee/). I'm going to guess it has something to do with your masonry code, but that's just a guess because that is throwing an error. Look at this code:
///////MASONRY/////
if (randomComplete == true) {
$('#boxes').masonry({
itemSelector: '.box'
});
}
randomComplete is defined out of scope.