Problem with two instances of CarouFredSel on same page

I have a page with two image carousels - seen here:
http://andrewsgroup.ca/test/listingdetail.cfm?sysid=260834707



The lower one works fine (except it is scrolling the upper one at the same time.)
The upper one only scrolls on arrow key press, but it is also moving both at the same time.

I have tried to change div id's, and tried to create separate functions for each instance..I am having no success, I don't really know what I am doing, sort of a shotgun method to try to fix..

My knowledge of JS and Jquery is very basic.
Can you help?


for convenience here are the scripts files-:
http://andrewsgroup.ca/test/assets/js/carousel.js
http://andrewsgroup.ca/test/assets/js/realia.js
http://andrewsgroup.ca/test/assets/css/realia-blue.css

Thanks
izweigAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
Try this for your navigation

 $('.carousel-wrapper .content ul').carouFredSel({
scroll: {
items: 1
},
auto: false,
next: {
button: function() { return $(this).parent().siblings(".carousel-next")},
key: 'right'
},
prev: {
button:function() { return $(this).parent().siblings(".carousel-prev")},
key: 'left'
}
}); 

Open in new window

0
 
COBOLdinosaurCommented:
The code is junk.  It can not even make all the way through the HTML validator.  The validator reports 18 errors before bombing on line 385 because of block elements stuffed inside an a tag.

Two carousels in the same page is less of a problem than the quality of the code.  there is very little point in trying to make special effects work for a page that is so badly broken that the validator cannot make it all the way through.

Take the page to: http://validator.w3.org/

After you validate it and fix the erors, you will have a better chance of getting the effects to work.

Cd&
0
 
izweigAuthor Commented:
replacing that code caused no change...
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
izweigAuthor Commented:
COBOLdinosaur- errors fixed.
0
 
izweigAuthor Commented:
Gary (Cathal)

I stand correct. Works beautifully
Thanks!!
0
 
izweigAuthor Commented:
Thanks for the quick and perfect fix..
Can i get a bit of an explanation on how this fixed it?
Thanks
0
 
GaryCommented:
CarouFredsel doesn't have anything coded in to target individual sliders itself (bad on them)
So this code tells it exactly which element in the dom to attach the prev/next actions to.
0
 
izweigAuthor Commented:
I actually just uploaded the change to the webserver, it is not working( weird) it works fine on localhost. Any idea why this may be?
0
 
GaryCommented:
Do an hard refresh.
0
 
izweigAuthor Commented:
Refreshed,Cleared my cache...When the page loads you can see the blue scrolling buttons load on the top scroller, then they disappear, they do however show in the source tho...and
key press will not move the top scroller either...
0
 
GaryCommented:
Do CTRL+F5

Working fine for me on both sliders independently
0
 
izweigAuthor Commented:
Seems to be an issue with Chrome Mac....
Did a Cmd Shft R...
Still buggy..should I ask the E-E community?
1015-EYREMOUNT-DR-West-Vancouver.jpg
0
 
GaryCommented:
Yeah I get the same problem in Chrome
You have two bindings for the slider under function InitCarousel() {} - remove the first one - might be conflicting.
0
 
izweigAuthor Commented:
Well that sort of works..lol
It looks good, but does not work at all like that....
The really odd thing is it works just fine locally(with both bindings).
Any Other ideas?
0
 
GaryCommented:
Something is adding a bootstrap hidden class to them.
0
 
izweigAuthor Commented:
I only come up with:

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

This should not cause this??

Do you see something other that that?
0
 
GaryCommented:
I'm still looking through the code, its annoying its only Chrome (which I find hard to debug with)

Maybe time to move to a better carousel
http://owlgraphic.com/owlcarousel/

(This is one I use with multiple sliders on the page and never had a problem with it cross browser, even better it is touch enabled)
0
 
izweigAuthor Commented:
You're probably right about owl... are you giving up?:)
0
 
GaryCommented:
I'll keep looking for a while longer.
0
 
GaryCommented:
It's hard to debug something when it works fine on first load in a new tab then stops working when you refresh the page.
0
 
GaryCommented:
All I can suggest is give the two carousels unique classes and duplicate the init code for the two classes and see if it works.
0
 
izweigAuthor Commented:
I had originally tried that before posting my question.Either I did it incorrectly or I did i correctly and it did not work.

Is it not called by ID?

ID  #main wraps both carousels.
Could I call one by class and one by ID...this is where i get a bit confused...

For example would this work..

...InitCarousel2();...


function InitCarousel() {
      $('#main .carousel .content ul').carouFredSel({
            scroll: {
                  items: 1
            },
            auto: false,
            next: {.....


function InitCarousel2() {
      $('.MyNewClass .carousel .content ul').carouFredSel({
            scroll: {
                  items: 1
            },
            auto: false,
            next: {.....


HTML:

<div class="MyNewClass span12">
  <div class="carousel">
    <h2 class="page-header">Similar Listings</h2>
    <div class="content">
        <a class="carousel-prev"> Previous</a>
        <a class="carousel-next" >Next</a>......
0
 
GaryCommented:
Give each carousel div a unique class where you currently use carousel for both of them and change the jquery like so

function InitCarousel() {
      $('.carousel1 .content ul').carouFredSel({
            scroll: {
                  items: 1
            },
            ...

      $('.carousel2 .content ul').carouFredSel({
            scroll: {
                  items: 1
            },
            ...

}
0
 
izweigAuthor Commented:
I sort of get it..Tried it not great results...
Don't I also have to change all css instances of carousel to carouse1 and carousel 2 and then change all the atributes of each?
0
 
GaryCommented:
You can leave the carousel class but add the other unique class
0
 
izweigAuthor Commented:
Add it where?
To the stylesheets or to the divs or to both?

I had just commented out the code block for the lower carousel.
It did not help...

Is frustrating indeed as I see it working randomly..grrrr
0
 
GaryCommented:
Your two carousels add another class

Top slider
<div class="carousel property">
<div class="preview">
...

And bottom slider
<div class="carousel bottom-slider">
<h2 class="page-header">Similar Listings</h2>
...

The js becomes
function InitCarousel() {
	$('.property .content ul').carouFredSel({
		scroll: {
			items: 1
		},
		auto: false,
		next: {
			button: function() { return $(this).parent().siblings(".carousel-next")},
			key: 'right'
		},
		prev: {
			button:function() { return $(this).parent().siblings(".carousel-prev")},
			key: 'left'
		}
	});
	$('.bottom-slider .content ul').carouFredSel({
		scroll: {
			items: 1
		},
		auto: false,
		next: {
			button: function() { return $(this).parent().siblings(".carousel-next")},
			key: 'right'
		},
		prev: {
			button:function() { return $(this).parent().siblings(".carousel-prev")},
			key: 'left'
		}
	});
} 

Open in new window

0
 
izweigAuthor Commented:
I am sad to say this did not fix it..I used to like Chrome..
And btw Thank you very much for doing this!

I am totally  stumped..are you?
0
 
GaryCommented:
At this point I would give up, when it takes hours to try and make a plugin work its time to move on to one that just works
I know in the past I have tried this plugin and could never get it to work properly and was pretty certain it didn't even support multiple sliders on the same page (apparently it does now but doesn't seem to do it very well)
I don't know if there is some conflict between it and your other js, it's weird it works locally.
You could say there is nothing wrong with the code as it works fine in FF and IE, maybe it is just a Chrome bug.
0
 
izweigAuthor Commented:
I do thank you for all your time and expertise.
Have a great day or evening, wherever you are.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.