I am trying to implement Sorgalla jCarousel to my website, but I can't seem to get it to work, even though to my knowledge, I have done everything as instructions say.
To help myself think and to simplify the situation, I even created a fiddle with just basic functions, and even that doesn't work!
http://jsfiddle.net/b2cwv/1/
Any suggestions what might be wrong with this? It's simplified from what I have in the website, but the code is basically the same.
$(document).ready(function() {
$(function() {
$('.jcarousel').jcarousel({
list: '.jcarousel-list',
items: '.jcarousel-item',
rtl: true,
center: true,
animation: 'slow'
scroll: '+=1'
wrap: 'both'
});
});
$('.jcarousel-prev').click(function() {
$('.jcarousel').jcarousel('scroll', '-=1');
});
$('.jcarousel-next').click(function() {
$('.jcarousel').jcarousel('scroll', '+=1');
});
});
It simply just doesn't fire.
Add the comma after all the configuration
animation: slow
Fix the css list width
width: 2em
check this fiddle
http://jsfiddle.net/raunakkathuria/b2cwv/2/
Its working now
Related
I am taking a look at this neat creation by Yunus Gaziev but there is one major problem with it - the pagination is removed as soon as you adjust the viewport, which seems to be caused by Owl, and I do not know why.
var owl;
$(document).ready(function() {
owl = $("#owl-demo");
owl.owlCarousel({
navigation: false,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
afterInit: afterOWLinit
});
function afterOWLinit() {
...
}
});
I have tried debug the javascript but could not find the cause. I do think that this pagination is not recreating on the changes of viewport in owl.carousel.js
This is where it tries to recreate the pagination
base.updatePagination();
base.checkNavigation();
Check it out. I hope this will help you and others to find the root cause.
The problem was that the owlCarousel initialiser needed to have afterUpdate: afterOWLinit declared so that whenever the viewport was resized, it would fire the customised pagination script again.
I have refactored the existing code thoroughly, an example may be viewed here - my version can be cloned from here.
DEMO
Steps : click 1-3 again and again and then click on active thumnail twice then next thumnail click wont work.
I have implemented Flexi Slider with Thumbnails, Its working fine, but sometimes The Thumbnails are not clickable. Not sure where Iam going Wrong.
/* New Slider */
$('.sliderNew #carousel').flexslider({
animation : "slide",
controlNav : true,
animationLoop : true,
slideshow : true,
itemWidth : 140,
itemMargin : 5,
minItems : 1,
asNavFor : '.sliderNew #slider',
reverse : false
});
$('.sliderNew #slider').flexslider({
animation : "slide",
controlNav : false,
animationLoop : true,
slideshow : true,
reverse : false,
sync : ".sliderNew #carousel",
start: function( slider ) {
$('.sliderNew #carousel .slides li').on('click',function(event){
//alert('asd')
$('.sliderNew #slider').flexslider("play");
});
}
});
/* New Slider */
Appreciate your help..
Thanks..
I've done some digging and found that this is probably due to a bug in the FlexSlider version you're using (version 2.1). In the Github updates (unfortunately they only go back to version 2.2) I did read something about "click handler updates", so I guess you've been so unfortunate to stumble upon an old bug. I've tracked it back to this update on GitHub, but that's more or less a guess.
On the bright side, they've fixed the bug. I've updated the JSFiddle to use the new version of FlexSlider:
http://jsfiddle.net/ennesht2/
You probably also want to check what you're doing with your CSS/positioning, because the demo looks like it's falling apart in Safari/Chrome (OSX). I've done one quick fix in your CSS to make the navigation element appear in this new version (uncommented the height:0), but you'll also want to update your CSS to use FlexSlider's version 2.3 one.
.sliderNew #carousel .flex-viewport {
border :none;
//height:0;
display:inline-block;
width:100%;
}
Firstly, since you are already using IDs to grab your DOM elements, you can simply use $('#slider') instead of $('.sliderNew #slider'). The same logic goes for the carousel element :)
I think you may wish to set the click handler on the img element, rather than its parent (the li element). So perhaps:
start: function( slider ) {
$('#carousel .slides li img').on('click',function(event){
$('#slider').flexslider("play");
});
}
I have a hunch on this one, I think that whenever your slide is running, it's coming over your thumbs, this happened once in a project I participated in.
The following is not a good practice of z-index but it should help you find out if this is the problem.
Add the following to your css to test the theory:
#carousel .slides li{
z-index:9999;
}
I'm trying to make an image slidein on page load but it doesn't seem to work at all. The delay has no problem but the sliding effect doesn't do anything. Any help would be greatly appreciated.
$(function() {
$(".bgslide").one('load', function () {
$(this).delay(1000).show("slide", { direction: "left" }, 'linear', 2000);
}).each(function() {
if(this.complete) jQuery(this).load();
});
});
Here is a link to a jsfiddle as well: http://jsfiddle.net/cDYvh/
The slide effect comes with jQuery UI which you didn't include: http://jsfiddle.net/cDYvh/1/
You could also use $.animate() to avoid including jQuery UI. For example, you could accomplish your example with something like this:
$(this).animate({ left: 2000px });
Note: You'll probably need to apply position:absolute to the elements. Other items can be animated as well, including color, opacity, etc.
Animate Example
I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});
Set the default style for "display" to "none". using show() will change this style value.
Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!
… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!
I experienced a similar issue when I forgot to include the flexslider.css
I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??
I have created a slider using CSS3 to display my testimonials.. Now I need to add some animation to this slider using Jquery. But I dont have any idea how to use Jquery with this slider.. and what are the suitable plugin for this. So anybody can tell me How can I add an animation to this slider?
any ideas are greatly appreciated.
Thank you.
Here is a link to the slider code: jsfiddle.net/XJVYj/82
I think it will be very hard to find a Plugin that exactly matches your code. But I could code you the jQuery stuff for it. But then I would have two Questions.
How much of the CSS can I change? Or should it also still work without js activated?
Are you staying with a number of 3 items in the future? Or do you want to change the number of slides dynamically?
// EDIT
OK it works now. I know its not very elegant, but I dont wanted to change too much of your code. So I just had to edit two of your css selectors (I commented the old one out). You also wanna notice, that with this solution your old method still works when javascript is disabled.
The jQuery Code follows...
$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});
$("input#first").click(function(){
$("div.one").animate({left:0},600);
$("div.two").animate({left:300},600);
$("div.three").animate({left:600},600);
});
$("input#second").click(function(){
$("div.one").animate({left:-300},600);
$("div.two").animate({left:0},600);
$("div.three").animate({left:300},600);
});
$("input#third").click(function(){
$("div.one").animate({left:-600},600);
$("div.two").animate({left:-300},600);
$("div.three").animate({left:0},600);
});
jsfiddle.net/mYhEV/2/
Hope it helps.
PS: For a cleaner solution you would have to rethink a bit. One method would be to put all the sliders in a wrapper and just moving this wrapper instead of moving.
Try Using these:
Flex Slider
Timelinr
SmartGallery
Skitter
There is documentation literally right in the script file which has options you can use:
$.tiny.carousel = {
options: {
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at 1 time?
axis: 'x', // vertical or horizontal scroller? ( x || y ).
controls: true, // show left and right navigation buttons.
pager: false, // is there a page number navigation present?
interval: false, // move to another block on intervals.
intervaltime: 3000, // interval time in milliseconds.
rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
animation: true, // false is instant, true is animate.
duration: 1000, // how fast must the animation move in ms?
callback: null // function that executes after every move.
}
};
Secifcally: animation: true, // false is instant, true is animate.
Try setting the animation to true when you call the slider on your element (you provided no script code so I can't edit it for you.)
$('YOUR_SLIDERr').tinycarousel({ animation: true });