So, I'm using this https://codepen.io/desandro/pen/wByaqj
And I activated the prevNextButtons: true,
like this:
$('.characters-main').flickity({
prevNextButtons: false,
wrapAround: false,
pageDots: false,
autoPlay: 10000
});
$('.characters-nav').flickity({
asNavFor: '.characters-main',
cellAlign: 'right',
prevNextButtons: true,
contain: true,
pageDots: false,
arrowShape: {
x0: 10,
x1: 70, y1: 50,
x2: 70, y2: 50,
x3: 35
}
});
I want that, when I click on the prevNextButtons
for .characters-nav
to automatically select the element from .characters-main
.
This is how it works now:
Add Flickity FilesGo to your Shopify theme code editor, scroll down to the Asset folder and create a . js file and name it flickity then create a . css file and name it flickity aswell. You should now have 2 files flickity.
Flickity is a JavaScript slider library, built by David DeSandro of Metafizzy fame. It's optimized for touch gestures, performance, and includes things like physics-based animation.
You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the carousel element.
If you are okay with this, feel free to use Flickity under the GPLv3, without purchasing a commercial license.
I have taken Your Example over here and I have added the following code:
// Main div
var flkty = new Flickity('.carousel-main');
// Next and previous events of the navigation div
$(".carousel-nav .next").on("click", function() {
// Changing items of the main div
flkty.next();
});
$(".carousel-nav .previous").on("click", function() {
// Changing items of the main div
flkty.previous();
});
In Your Case it should be like this:
// Your main div is characters-main
var flkty = new Flickity('.characters-main');
// Next and previous events of the characters-nav
$(".characters-nav .next").on("click", function() {
// Changing items of the main div
flkty.next();
});
$(".characters-nav .previous").on("click", function() {
// Changing items of the main div
flkty.previous();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With