Can you make seperate Prev Next buttons with the Cwicly slider? Can you just make a button and link it with a class or something. Ultimately I want to put the pagination as numbers (1/3) and the Prev Next buttons underneath the slider image. Tried linking two sliders but that didn’t work. Thanks.
Hi @Brendon,
Yes, you can create custom prev and next buttons for sliders by using the Cwicly actions.
You will of course need to specify the Slider ID in the action to target the specific slider.
Note: I recommend setting your tag to “button” instead of “a” for these buttons.
4 Likes
Amazing, thanks Dan @StrangeTech
Once again Cwicly for the win. I looked into Bricks for a simple way to do this but you have to break into code so gave up and back to Cwicly.
@StrangeTech BTW do you know if it possible to have numbers instead of dots? Like 1/3 next slide 2/3 etc
@Brendon you can use onather slider with content just a number of slide (acf field can be used to store this) and than just style it like you want and sync to main slider and set it like navigation
Great thanks. Just watched the slider tutorial and guess I could just add numbers and link? Not sure how I would use ACF? This is the design I’m after. Got the buttons working.
Yes, you can. There are several options:
If your slider is static and has a known number of elements: you can simply create the number buttons and use the Go to Index Slider action for each button
If your data is dynamic, then you have a couple of options:
You can query the data and add the loop index to show the number. The to trigger the slider from the buttons you can use one of the following:
- Use the Go to Index action and pass in the loop index by pasting in the tag {loop-index} (I haven’t tested this last part with the Action, but in theory it should work if Cwicly supports it)
- As @JohnySvitana mentioned, you can use one slider to navigate another one, see the example from @Araminta:
brilliant thanks. It’s just static with a known number. It has 4 sliders so I added 4 buttons (1,2,3,4) and added goto and number. Works! Only problem is the 1,2,3,4 change and doesn’t match up to the right slide. The prev/next buttons are correct. Also for some reason the 2 doesn’t work when it first loads but works after clicking another number. Am I missing something.
Oh got it working but turning loop off. Doesn’t seem to work correctly with loop on. I rather have loop on, any ideas?
Loop can add duplicate elements to facilitate being able to show the first elements at the end and vice versa, so the previous solution is a no-go.
Here is the simpler and easier solution:
- Keep the default pagination buttons
- Size them according to your design to fit the number:
- Add the following Custom css to the slider
.blockclass {
counter-reset: pagination-dot;
}
.blockclass .swiper-pagination-bullet::before {
display: inline;
vertical-align: middle;
counter-increment: pagination-dot; /* Increment the value of counter by 1 */
content: counter(pagination-dot); /* Display counter value in default style (decimal) */
}
Should give you something like this:
Note: You can style the pagination dots using the built-in methods to change colours, etc.
1 Like
Fantastic thanks for your time on this. That worked, only issue is the placement of the dots. I’m ok without the loop to keep it simple. The only last nice to have would be to make the buttons go inactive on the last slide and dim and the numbers to show the active one. Is there a way to do that?
I don’t have time to test this now, but you should be able to position the dots using CSS.
I think the only simple ways to keep the active dot/number in sync are using the built-in pagination or via synchronising two sliders and use one as navigation.
If you use the built-in pagination option I shared with you, the active /inactive dot/number is stylable via the Cwicly primary tab options.
The buttons should already have that capability built-in as well as far as I remember, although it may be done differently for static sliders and dynamic ones.
1 Like