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);
Related
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,
In my Ionic3 app, I have a slides component with a bunch of slides, and I want to be able to click on each of them. So code would look like:
<ion-slides>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
The problem I have is that very often, when I try to click on the slide, it actually does a swipe of the current slide and shows the next one, therefore the click never happens. This happens mostly using a tablet, as I guess my finger is less stable and if the click is not perfect then it will slide.
Is there any way to make the click less sensitive (so that even a small variation of distance between down and up event is recognized as click not swipe)?
You can just first get your swiper using querySelector:
let mySwiper = document.querySelector('yourSwiperSelector');
Then just change the treshold:
mySwiper.threshold = 100;
It worked for me. In my case it was ionic2-calendar and my selector looked like this:
let mySwiper = document.querySelector('.swiper-container')['swiper'];
There's a lot of options available that ionic don't list but you can see them here in the library that ionic slides uses:
http://idangero.us/swiper/api/
Setting the Touches threshold to a reasonable value should help.
If you have a reference to your slider, you can simply say this.slider.threshold = 100;
<ion-slides pager>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
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 working on a events board app. Events are displayed in columns at the height matching the start time and pack into the space if there is more then one overlapping. Each event is a view and I want to have a div next to the view that shows and hides on hover.
I know how to bind to mouseEnter and mouseLeave to show and hide part of the template but I want to show something adjacent to my view/template not within it.
I've already got some computed properties on the view to place the event with the correct height and width so I don't want to add the popover inside the view.
Here is something to mess with http://jsbin.com/osoner/1/edit
Seems like something simple but I want to make sure I'm doing things the Ember way.
After messing a little with your provided jsbin, here the results.
Basically what I've done was adding a new popup css declaration wich do position the popup so that it appears outside the parent view, and also moved the {{#if...}} helper into the originating view.
If you want to go more fancy, checkout this jsfiddle wich uses the twitter boostrap popover.
Hope it helps.
I want to developed a list, <ul><li></li>...<ul>, that shows every <li>element separately, and user must have to swipe from right to left to see next element.
Photoswipe do the that, but I need to show images with maps areas instead of <a href...><img ... /> </a>.
Do you know how can make a list where every list element is shown in one page, and user must have to swipe an element to see the next one?
You can use iScroll to do this. It makes it possible to scroll horizontally, as it is shown here. It also works with jQuery Mobile (here is an example for that).
Beyond this, you can take a look at iScroll's website and their code and examples at GitHub.