Hi, 1st post here & I’m pretty new to JS & don’t know much, but I’ve been dealing with using so many jquery plugins on web projects lately that I want to tweak in certain ways, so I’m just starting to learn basics. In the meantime, I’ve got this old carousel plugin (external js) I’m needing to use, wish I could use another carousel but they don’t seem to work for what I’m doing. Problem is that the controls are very plain, just text & coded in the plugin. I want to take the functions that control previous & next actions, & get them into links that can work from my php file, & I don’t want the prev & next links next to each other like they are in the plugin. But the way things are coded in this plugin I don’t really understand how I would do this. Embarrassingly spent a few days trying to work this out to no avail.
This is the section from the plugin that controls & has the generic back & forward buttons, there is pagination code in the plugin too but that is fine. Also here is the full plugin if needed https://github.com/richardscarrott/jquery-carousel/blob/master/jquery.carousel.js
insertNextPrevLinks: function() {
this.prevLink = $('<a href="#" class="prev">Prev</a>')
.bind('click.carousel', $.proxy(this, 'prevItem'))
.appendTo(this.container);
this.nextLink = $('<a href="#" class="next">Next</a>')
.bind('click.carousel', $.proxy(this, 'nextItem'))
.appendTo(this.container);
},
nextItem: function() {
this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
this.animate();
return false;
},
prevItem: function() {
this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
this.animate();
return false;
},
updateBtnStyles: function() {
if (this.options.pagination) {
this.paginationLinks
.children('li')
.removeClass('current')
.eq(Math.ceil(this.itemIndex / this.options.itemsPerTransition))
.addClass('current');
}
if (this.options.nextPrevLinks) {
this.nextLink
.add(this.prevLink)
.removeClass('disabled');
if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
this.nextLink.addClass('disabled');
}
else if (this.itemIndex === 0) {
this.prevLink.addClass('disabled');
}
}
},
animate: function() {
var nextItem, pos;
// check whether there are enough items to animate to
if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
}
if (this.itemIndex < 0) {
this.itemIndex = 0; // go to first
}
nextItem = this.items.eq(this.itemIndex);
pos = nextItem.position();
if (headache) {
this.runner
.stop()
.animate({left: -pos.left}, this.options.speed, this.options.easing);
}
else {
this.mask
.stop()
.animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
}
this.updateBtnStyles();
}
};
Thanks.
Yes I thought I should be able to do that & I tried, but maybe in my inexperience I just didn’t have the code done correctly. Here is one of the pages with the carousel… http://mcmcomm.net/newsite/work-mcm.php
So, in the demo you link to, the pagination links are below the slider and the “previous” and “next” links are beneath the pagination links.
Could you maybe describe what you would like to change.
Yes I’m trying to create image based or rollover next/prev links in my php file that I’ll probably put on the sides of the images, just can’t seem to those prev/next calls to work from the php. I can’t seem to even move those tiny text based links generated in the js plugin file, so I’d rather just delete those (keep the pagination cuz that is fine) then just call the prev/next through links in the php.
Not exactly exciting stuff, but as you see, you can quite easily target them via CSS to apply whichever styles you want (including background-image for a rollover effect).
I think I tried something similar a few days back & had no luck, but maybe I didn’t code something right. Using CSS like you say, I did get things the way I wanted. I don’t know if this is the optimal way I could of done this, but it works. Added this to the styles…
Then I made changes in the plugin js file as well. Instead of where the text was to make the links like before, I just put my image tags in place of that, with some styling for sizing…
I’m not sure if I could of got rollover images working with this method but I didn’t try because I don’t think they asked for them.
Anyhow, thanks so much for helping & pointing me in the right direction on this.
The slider looks much better now - well done!
If you wanted to have any kind of rollover effect on the image, I would use a background-image on the links, then target .prev:hover and .next:hover.
