Can’t have more than one UL Slider on page

[herman428]

I’ve been re-doing a portfolio site and went with a responsive template I thought would be easy to enough for me to edit, and for the most part it’s been ok. (“Easy enough” because I’m more of a front-end designer with “light” development).

There’s a slider function on the page which works great and I can add “x” amount of images and have it flow through. However, placing a second slider, `

`, on the page doesn’t work, it breaks and all images appear vertically.

I’ve dug around in the css, but there’s something I’m not finding. Not sure if it’s in the css or one of the other supporting files.

I’m adding an example of the basic HTML code which appears for both sliders via this CodePen link. My first time using it, so I can already see based on the missing images and functionality that I have done this wrong.
http://cdpn.io/kAcJx

Here is perhaps a better example of how it is currently functioning. Hoping the source code is easier to access here.
http://www.ghcreativemedia.com/ghcm/cpb.html

Thank you for your help. Please let me know what additional info you need to look at, (that I’ve obviously left out).

[TheDoc]

Because it’s using an ID of slider, the plugin is probably assuming that there is only going to be *one* on the page. That’s likely where your trouble is.

[herman428]

As far as “plugin”, I guess it’s really within one of the .js files, no ?

I had figured that there was a specification of how many slider ID’s were being allowed on the page, I need to change that to more than one, possibly 3 or 4 on a page.

So… I found a relative “portfolio-detail.js” file that I missed, (of course). I did a new Codepen file link that should show the .js that’s there for it:
http://cdpn.io/arfFA

My question is, for the .js portion, on line 13 that starts with the “$”, can I duplicate that and paste further down, specifying a “#slider2” and so on… ?

How can I edit this to add multiple sliders ?
What parts can I copy and paste and where ?

[Alen]

You can only have one unique ID on any given page.

If you need to add more than one slider, you would essentially do this:

In your HTML:

… /* code */…

… /* code */…

In your JavaScript, you would target them individually:

$(‘#slider1’).someSliderPlugin({ … /* options */…});
$(‘#slider2’).someSliderPlugin({ … /* options */…});

[herman428]

OK, that makes sense.

I’ve got the HTML part down fine, but with the change I made to the .js file, it’s still not functioning. I may have made the change in the wrong place, or copied incorrectly.

This is what I have right now:
$(document).ready(function () {
$(“#slider”).responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: “portfolio_slider”
}).bind({ “callbacks-after”: function () {
$(“a[rel^=’prettyPhoto’]”).prettyPhoto({ animationSpeed: ‘slow’, theme: ‘facebook’, slideshow: 2000 });
}
});

$(“#slider”).touchwipe({
wipeLeft: function () { $(‘.portfolio_slider1_nav.next’).trigger(‘click’); },
wipeRight: function () { $(‘.portfolio_slider1_nav.prev’).trigger(‘click’); }
});

$(“#slider2”).touchwipe({
wipeLeft: function () { $(‘.portfolio_slider2_nav.next’).trigger(‘click’); },
wipeRight: function () { $(‘.portfolio_slider2_nav.prev’).trigger(‘click’); }
});

$(“#slider3”).touchwipe({
wipeLeft: function () { $(‘.portfolio_slider3_nav.next’).trigger(‘click’); },
wipeRight: function () { $(‘.portfolio_slider3_nav.prev’).trigger(‘click’); }
});
});

[herman428]

That’s not going to work.

Put the code on CodePen again.

http://cdpn.io/gJIwt

[herman428]

Figured it out.

I’m sure I probably got it backwards, but what worked was saving multiple copies of the slider.js file and relabeling the ID selector.

I think I would have rather had done it the way AlenAbdula had suggested, which also seems “cleaner”, doing it all in the same .js file, but when I tried doing it that way, it did not function for me. I’m sure my structure or syntax may have been wrong, perhaps the way I put it together, but at least now I’ve got it working.

Thank you everyone for your suggestions and help !

[Author]

Posts