0:00
come on
0:06
[Music]
0:10
so in this video we're going to be
0:11
looking at a feature inside moving box
0:14
called slider syncing and essentially
0:17
what that allows us to do is it allows
0:19
us to keep multiple instances of moving
0:22
box in sync with each other
0:25
so in the next example here I have a
0:28
slider and a different instance of
0:31
moving box below it now this instance
0:34
below is showing three slides at a time
0:36
and this instance up here is only
0:38
showing one slide
0:40
but if you notice right now they behave
0:42
very differently
0:43
same thing over here I'd like to keep
0:45
this instance in sync with this instance
0:50
so this couldn't be easier to do
0:52
essentially all we need to do is we need
0:54
to go inside moving box
0:57
and what you do is you find the settings
0:59
for slider sync you enable that
1:02
and all you need to do is you need to
1:04
give it a class in this case I give it a
1:07
class of MB stacked
1:10
and then you go to your second instance
1:12
of moving box
1:13
and we can go ahead and enable that and
1:16
all you need to do is make sure that
1:18
that sync class is the same so just make
1:21
sure that that is the same within both
1:23
sliders
1:25
and it magically will keep those both of
1:27
those Sliders in sync so you'll notice
1:29
when I change this slider down here
1:32
that number changes as well so they are
1:35
perfectly kept in sync
1:41
now in this second example let's go
1:43
ahead and enable slider sync now I have
1:45
a different class than I had on the
1:47
other ones if I gave it the same class
1:49
then we all of them would be kept in
1:52
sync
1:53
uh but we don't want to do that right
1:55
now we want to keep these two separate
1:57
now one thing you'll notice is
1:59
um on this first instance I have sync
2:02
height enabled
2:04
let me show you why that is
2:06
so in this instance here we'll notice
2:09
that now these two sliders are kept in
2:11
sync
2:12
however
2:13
I wanted to make sure that the height of
2:16
this slide
2:17
matched the height of this entire slide
2:21
so this particular this second instance
2:23
of moving box that's on the right side
2:25
contains three slides
2:27
now I wanted the height of this one
2:30
slide moving box to match the height of
2:33
these three that's what that check box
2:35
does
2:36
so on the on the moving box move so on
2:40
the moving box instance where we wanted
2:42
the height to actually be set taller so
2:44
that it sinks we check that box
2:49
now in this implementation you are not
2:51
limited to just two moving boxes that
2:54
are synced you can actually sync as many
2:56
instances as you want on the same page
2:59
so over here
3:01
each we're going to review today is the
3:03
external controls
3:04
and this allows us to add buttons or
3:07
links to our web page that allow us to
3:10
go to previous next navigate to a
3:13
particular slide number and then we can
3:15
also play and pause the slideshows
3:20
so inside moving box if we scroll all
3:22
the way down to the bottom of the
3:23
settings you'll see that we have a bunch
3:25
of classes that we have the ability to
3:27
customize
3:29
so we here I've set the play class the
3:31
pause previous next and go to class to
3:35
be these particular values so MB demo
3:37
play MB demo pause so on and so forth
3:42
and what I've done here is I have a
3:44
button and all I did is added the class
3:47
for the action that I want to that
3:50
button
3:51
and that's all you need to do
3:53
you can either add this class to a link
3:55
or any button and it will magically turn
3:58
it into that particular action
4:00
so here all I had to do is copy the
4:02
mbdemo previous class and I magically
4:05
made this button into a previous
4:08
action that is tied to this particular
4:11
moving box instance
4:14
same thing for next same thing for play
4:17
same thing for pause
4:19
now the one that could be a little bit
4:21
different is the go to slide number
4:25
so what we need to do is here yes we
4:28
need to add the class
4:30
but then we also need to add a data
4:32
attribute
4:34
now this is it in this button stack we
4:36
have the ability to add our own custom
4:38
attributes we can do data go to and at
4:41
that point you need to put the name of
4:43
the slide
4:46
now if you aren't aware inside of moving
4:49
box you inside the slide you can
4:51
actually provide a custom name
4:55
so every slide you can cust you supply
4:58
your own custom name
5:00
and then if you would link to that name
5:02
inside of the button
5:05
so in this instance I'm linking to the
5:07
slide number four and if we go ahead and
5:10
look at that slide we'll see that I have
5:13
given it the name of four
5:17
now if you don't want to provide custom
5:19
names for every single slide you can
5:21
reference them with the numbers one two
5:24
three four with it actually not the word
5:26
the actual number
5:28
so your slides by default will be given
5:31
names of the number they are inside your
5:34
slide deck the order number so it is the
5:37
number one or the number two
5:39
um here I just wrote out that uh
5:41
particular name because this was slide
5:42
number four so I give it a name of four
5:46
now if you are using a button stack or
5:48
some sort of text link those might not
5:51
have the ability to add your custom data
5:54
attributes so how would you do that with
5:56
a normal link
5:58
so first off we're going to go ahead and
6:00
we're going to get the class that we
6:01
need so mbdemo go to
6:03
let's go ahead and I'm going to edit
6:05
this link
6:06
and I'm going to show custom attributes
6:08
and what I'm going to do is I'm going to
6:10
add a class here
6:12
and I'm going to paste in that value
6:16
and then what I do is I'm going to go
6:18
here and we need data go to and then
6:21
four okay so we're going to go ahead and
6:23
here I'm going to go edit my link again
6:27
I'm going to click Plus
6:29
and we're going to do data go to and the
6:32
value is 4.
6:36
so now if I click this button it should
6:38
take us to slide four let's check it out
6:41
so here's my button I can go ahead and
6:43
click change me and it navigates
6:45
directly to slide number four
6:54
[Music]