I am using slider with dynamic data using property loop and autoplay
Button/Click does not work when going from last slide to first slide
slide next and slide previous both scenario.
NOTE - its working fine without loop property
for more details: forum link
thank you,
Related
Is there a way in Ionic 2 to be able to transition between pages as if we were in a Slides component? Meaning that as soon as I start swiping a little left or right I start seeing a piece of the next or previous page? If I continue swiping then I transition to the next/previous page, else I go back to seeing only my current page.
It's like having a dynamic slides component, where ion-slide are automatically added. A little bit like the way the infinite scroll works, we could have 2 to 3 ion-slide in the DOM and they'd be reused as we move forward/backward.
This feature will be available in beta 7 (we are in beta 6) for tabs in material design. The option to swipe back in the pages stack is already available but you must be running on a device to see it in action. Check out the Ionic2 road map to see whats up and coming: https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit
How can I disable the Previous button on the first slide and Next button on the last slide in jQuery Cycle2 Malsup plugin?
I know this question has been answered before for the Cycle "1" plugin (and that it's posted as a demo on malsup's page). But how do I go about implementing it for the Cycle 2 version? I can't seem to find a simple answer anywhere and I'm pathetically too newbie in Javascript to understand the Cycle 2 API page. Could someone help me by showing me a fiddle?
This is actually done automatically if you set the data-cycle-allow-wrap option set to false in the cycle HTML. It will add the class disabled to the prev/next control if it is at the beginning/end of the slideshow. Then you just use CSS to style it so it hidden, or grayed out. No extra Javascript needed.
Here is a fiddle example: http://jsfiddle.net/X3kYY/
I'm using Foundation's Orbit slider to show levels of a house, the first slide is always the basement but this is not the slide that we would like to start with. We would like the page to first show the first floor, which is the second slide. We are using Foundation 4.
There is nothing in the documentation about setting a starting slide and adding the active class on the second slide in the HTML doesn't solve it either.
Check out my JSBin example: http://jsbin.com/IVisAWA/2/edit. Here the starting slide is '0' but I would like it to be '1'.
I can't find any built in option, you can use the orbit:ready event callback and force a click to the next element.
Code:
$("ul").on("orbit:ready", function(event) {
$(".orbit-next").click();
});
Demo: http://jsbin.com/ekarucuc/1/edit
You can include two lines of code to the foundation.orbit.js to use and customize it your way:
Add this line
self._goto(settings.start_slide, true);
at the end of the "self.init" function.
In the
Foundation.libs.orbit
inside the "settings" list, add this new setting
start_slide: 0
to start always on the first slide by default.
Now, reset the parameter of the starting slide you want to:
<ul data-orbit data-options="start_slide:1;">.
knowing that your list starts at 0, the second item should be 1: data-options="start_slide:1;" in your HTML slide list.
Now you can use even two or more slides in the same page, one starting in the first slide, and the other starting where you want.
I was looking for something similar, but couldn't use Fabricio's solution as I didn't have scope to change the Foundation.orbit.js file.
I ended up enabling the bullet point nav items when initialising Orbit, then just triggering a 'click' on the appropriate bullet point. But I didn't actually want to display the bullet points, so I hid them with some CSS.
Something like:
var button = $('div.orbit-container').find('li[data-orbit-slide="1"]');
button.trigger('click');
And:
div.orbit-bullets-container {
display: none;
}
You can do this after you initialize your orbit slider.
$('#orbit-slide').data('orbit-instance')._goto(indexSlide, true);
I am having trouble stopping the first scrolling once the page loads. You can see it here http://foundation.zurb.com/docs/components/joyride.html . After loading the website, joyride window scrolls automatically page littlebit lower
See it better in the old demo http://zurb.com/playground/jquery-joyride-feature-tour-plugin
I need the website to load normally (with top bar) and then activate scrolling after "next" button is clicked.
I am using latest version of Foundation 4 and foundation.min
Currently I am trying the docs page and it does not scroll, so either they fixed it or it was not a problem at all initially.
http://foundation.zurb.com/docs/components/joyride.html
Either ways, I see the best solution for you is to have the first step way above in the page, so that even when it takes focus, there's no page scrolling needed.
I'm having a really weird problem. When I click on Quick View the first time on
http://coderweb.info/tbps/index.php/shop/accessories
the content appears in the modal window as it should, namely once. The second time I click on any of the Quick View buttons, it appears twice (except for the image). The third time it appears thrice and so on. There is no loop anywhere in the code. The Quick View link is in the following format
http://coderweb.info/tbps/index.php/shop/accessories/universal-dual-tone-horns-detail?how=quick&tmpl=component
It basically loads the Virtuemart Product Detail page, but I have modified it so that when the 'how' parameter is passed with the value 'quick', it shows the 'Quick View' instead:
if(JRequest::getVar('how','') == 'quick'){
echo $this->loadTemplate('quick');
return;
}
What is causing this problem? How do I fix this?
I added
rel="{handler:'iframe'}"
to the link and that seems to have fixed it. I guess it was using a div element by default and it wasn't being cleared properly.