Posted 4 months ago #
how to make like below:
1.Initial start state of slide only has the right arrow visible indicating to the user that the scroll must only proceed in one direction.
2.Mid-slide, both arrows must be present so that the user is able to scroll in either direction.
3.When at the end of the slideshow with no more items to scroll through, the right arrow must be visible and the left arrow must not, indicating to the user that they can only proceed back the way they came through the slideshow.
You can do this with a custom slideshow script, there is an example in the jQuery Cycle documentation on managing prev/next controls.
You'll have to add a comma after the slideExpr: '.mslide' option and the after option, like this:
slideExpr: '.mslide',
after: onAfterThe new onAfter function will need different IDs to match the Meteor Slides navigation markup:
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$j('#meteor-prev')[index == 0 ? 'hide' : 'show']();
$j('#meteor-next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}
Posted 3 months ago #
Thank you very much
I almost done.
for the onAfter function I still have some question. If I have 3 slideshow, i need write the different id one by one, like this:
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$j('#meteor-preveditorial_ar')[index == 0 ? 'hide' : 'show']();
$j('#meteor-nexteditorial_ar')[index == opts.slideCount - 1 ? 'hide' : 'show']();
$j('#meteor-preveditorial_dialogue')[index == 0 ? 'hide' : 'show']();
$j('#meteor-nexteditorial_dialogue')[index == opts.slideCount - 1 ? 'hide' : 'show']();
$j('#meteor-preveditorial_du')[index == 0 ? 'hide' : 'show']();
$j('#meteor-nexteditorial_du')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}It works. But is that what you mean or is there any easy way.
BTW, thank you a million.
No problem! The nav for each slideshow has a unique ID and a generic class. If you use the ID, would need to add them for each slideshow, but you could try using the classes instead and see if that will apply to each slideshow:
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$j('.prev')[index == 0 ? 'hide' : 'show']();
$j('.next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}
Posted 3 months ago #
Thank you! It's works.
One more question, if I make it like a tab, there are 3 options, each one for one slideshow, how can I make it when I Click for another slideshow, the hidden one will be initial. Right now, it keep the statement when it hidden. Just like this:
http://peitidesign.com/ ->Editorial
That's good to hear. I'm not quite following you, how do you want it to work with the tabs?
Posted 3 months ago #
My point is how to initialize the slideshow without refresh the page. I mean when you click some button and let the certain slideshow appear again , it should be at the first slide.
It should be possible, but it would take some experimentation with the jQuery Cycle options.
I would try to use metadata to pause or stop the other slideshows so that only the one that is showing is running. This should keep them on the first slide, and then you would have to use whatever click event you are using to expand the different sections to also resume the slideshow when it is expanded.
Posted 3 months ago #
I see. Thank you very much for your patience
No problem, I hope that helps!
You must log in to post.
