jcarousel continuous image slide - javascript

It's my first post here. I have this simple web site www.kanalistart.com and there you can see an image sliding around but not continuously. Here are the current settings if the script. What can I do to make it unstoppable. Thanks!
// Default configuration properties.
var defaults = {
vertical: false,
start: 1,
offset: 1,
size: null,
scroll: 9,
visible: null,
animation: 'normal',
easing: 'swing',
auto: 0,
wrap: null,
initCallback: null,
reloadCallback: null,
itemLoadCallback: null,
itemFirstInCallback: null,
itemFirstOutCallback: null,
itemLastInCallback: null,
itemLastOutCallback: null,
itemVisibleInCallback: null,
itemVisibleOutCallback: null,
buttonNextHTML: '<div></div>',
buttonPrevHTML: '<div></div>',
buttonNextEvent: 'click',
buttonPrevEvent: 'click',
buttonNextCallback: null,
buttonPrevCallback: null
};

Related

owl carousel - not show last item when is rtl and loop is false

I have 2 problem when use owl carousel2 on mobile screen size and set rtl: true and center: true.
Problem 1: last slide (slide 5 on demo) not show when drag by mouse or touch.
Problem 2: If have one slide, then slide 1 not showing.
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
rtl: true,
center: false,
items: 4,
responsiveClass: true,
loop: false,
nav: false,
margin: 10,
lazyLoad: false,
autoplay: false,
autoplayTimeout: 10000,
smartSpeed: 200,
autoWidth: true,
responsive: {
0: {
items: 1,
center: true,
autoWidth: true
},
768: {
items: 2,
center: false,
autoWidth: true
},
992: {
items: 3,
center: false,
autoWidth: false
},
1200: {
items: 4,
center: false,
autoWidth: false
}
}
})
})
I create an example with js and css file from owlcarousel2.github.io with new owl carousel2 updates.
Demo problem:
https://jsfiddle.net/j7jg7ynb/6/

How to stop infinite slider on thumbnail image?

I got codes for thumbnail slider from menu cool but the slider won't stop at a point where it ends, it is infinite.You can find here. Please help.
If you will change showMode setting to 1, then it will not be stuck in infinite scroll
var thumbnailSliderOptions =
{
sliderId: "thumbnail-slider",
orientation: "horizontal",
thumbWidth: "300px",
thumbHeight: "150px",
showMode: 1, // earlier this was set to 3 change it to 1
infiniteSlides: false,
stopAtEnd: true,
autoAdvance: false,
selectable: true,
slideInterval: 3000,
transitionSpeed: 1000,
shuffle: false,
startSlideIndex: 0, //0-based
pauseOnHover: true,
initSliderByCallingInitFunc: false,
rightGap: "default",
keyboardNav: true,
mousewheelNav: true,
before: null,
license: "b2e98"
};

Overriding default wrapper name in carouFredSel

As a newbie to caroufredsel, I am trying to override the default wrapper name in for the carousels using a dynamic count.
However, the carousel rendered only has the default caroufresel_wrapper. Whereas my javascript is trying to get caroufredsel_wrapper0, caroufredsel_wrapper1, caroufredsel_wrapper2 for 3 carousels on the same page. I find it amusing that it will not get overridden.
My code for carousel creation is here
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
wrapper: { element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'},
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}
});
});
}
The documentation does not make it explicit, but the carouFredSel accepts two parameters: (options, configs). The wrapper makes it part of the configs parameter. Try this:
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}},
{
wrapper: {
element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'
});

Carousel last thumb doesn't work

I have a carousel but somehow the last thumb doesn't work, you can double click it and shows wrong large image.. I really can't find the issue :(
Here it works with the last thumb: CAROUSEL
Here it doesn't: FIDDLE
The script:
$(function() {
$('#carousel').carouFredSel({
responsive: false,
circular: false,
auto: false,
items: {
visible: 2,
width: 1000,
height: '475'
},
scroll: {
fx: 'crossfade'
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 4
},
width: 254,
height: 112
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
$('#carousel').carouFredSel({ needed to be
visible: 1 and NOT visible: 2

dispatchEvent not working

As shown in the demo, dispatchEvent is not working as expected.
http://jsfiddle.net/DerekL/V8uEN/
Key part:
btn.dispatchEvent(
document.createEvent("MouseEvent")
.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null)
);
An alert should pop up after 1 second upon loaded, but it is not coming up and an error appears in the console:
Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event provided is null.
I don't know where's the problem at since I found a demo almost with the exact same code, and it is working but not mine.
btn.dispatchEvent(
document.createEvent("MouseEvent")
.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null)
);
Your problem is that initMouseEvent doesn't return anything. You can't combine all of that into one line. You need to break it up.
var mEvent = document.createEvent("MouseEvent");
mEvent.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null);
btn.dispatchEvent(mEvent);
This is how it's done in the demo you linked to.
This works:
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
alert("Clicked.");
});
setTimeout(function () {
var mEvent = document.createEvent("MouseEvent");
mEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
btn.dispatchEvent(mEvent);
}, 1000);

Categories

Resources