Options to define prev/next buttons SVG

[FabianGabor]

Would be nice to have an option to define the prev/next button svg code. For example:

var flkty = new Flickity( '.flickity', {
  svgViewBox: 'x1 y2 x2 y2',
  svgPath: 'svg path',
  svgTransformLeft: 'translate(x,y)',
  svgTransformRight: 'translate(x,y) rotate(x)'
});

PrevNextButton.prototype.createSVG = function() {
  svg.setAttribute( 'viewBox', this.parent.options.svgViewBox );
  path.setAttribute( 'd', this.parent.options.svgPath );
  var arrowTransform = this.isLeft ? this.parent.options.svgTransformLeft : this.parent.options.svgTransformRight;
};

[desandro]

This could be a useful pro feature. Do you want to tweak the arrow shape (thinner stroke, wider angle) or are you looking to put in a completely different shape?

[FabianGabor]

For now I needed a thinner (like 1px) arrow and got bored of changing it in the js file. For basic users would be enough to be able to change the stroke's width, maybe the angle. But for a web designer might be important to be able to change it completely to their needs.

[stryju]

i'd vote for having full control over the prev/next buttons - maybe passing an array that would contain html for the buttons content, like:

prevNextButtons : [ '<b>prev</b>', '<em>next</em>' ]

or even

prevNextButtons : [ '', '' ]; // or `[]`?

to have "empty" buttons, that one would style with css only

[zslabs]

I like #50 (comment). I normally compile all of my SVGs as a sprite that references symbold IDs, so being able to inline this would be great so I don't have to modify the color with CSS when needed using http://zslabs.com/articles/svg-background-fill/

[thedgbrt]

+1!

[mbryne]

+1

[stryju]

should i prepare a PR for that, @desandro?

[drastick]

+1

[mdmoreau]

+1

[seyyed-sina]

+1

[j-greig]

Would love this also... what's the best way to hack in a custom SVG for now?

[zachgibson]

+1

[jonnyhaynes]

+1

[tannerhodges]

👍

Just saw the arrowShape commit come through. Went ahead and pulled down the master branch to start using this feature.

Demo

http://demo.tannerhodges.com/flickity/sandbox/arrow-shape.html

Getting Started

For others who want to get started now, here's what I did:

• Build a local version of Flickity

git clone git@github.com:metafizzy/flickity.git
cd flickity
npm install
bower install
gulp

• Copy dist/flickity.pkgd.js into your project
• Open your button SVG and look for the path that makes up your shape
  • Note: It has to be pointing left, otherwise your arrows will end up backwards
  • Also: It has to be 100x100, otherwise your arrow will get squished

...
<path class="st0" d="M62.5 0l3.6 2.1L38.7 50l27.4 47.9-3.6 2.1-28.6-50L62.5 0z"/>
...

• Copy the coordinates from inside the d="..." attribute

M62.5 0l3.6 2.1L38.7 50l27.4 47.9-3.6 2.1-28.6-50L62.5 0z

• Init your Flickity carousel with JavaScript via new Flickity()
• Set the arrowShape property to the path you copied from your SVG file

new Flickity( '.myFlickityCarousel', {
  arrowShape: 'M62.5 0l3.6 2.1L38.7 50l27.4 47.9-3.6 2.1-28.6-50L62.5 0z'
});

Other Notes

• Will definitely need a note in the docs that custom paths have to face left.
• Would be awesome if we could define the viewBox dimensions. Currently have to fit everything in 100x100. Not a huge deal, but would be helpful.
• It doesn't look like you can use multiple paths yet — haven't tested though. Might be useful too?

Excited to see this get released!

[desandro]

@tannerhodges Thanks for taking a look. Yup, this will land in the next release. It's still in development. I'm still putting together docs. I'll follow up when it's showtime.

[desandro]

Flickity v1.1 released with arrowShape option added

The arrow is drawn on a 100 × 100 viewbox with four points (p0, p1, p2, p3) made up of six coordinates x0, x1, y1, x2, y2, x3. The four points draw the top half on the left arrow.

arrowShape: { 
  x0: 10,
  x1: 40, y1: 50,
  x2: 70, y2: 50,
  x3: 40
}

Set a custom shape by setting arrowShape to a SVG path string. The path is for the left arrow drawn in a 100 × 100 viewbox.

arrowShape: 'M 0,50 L 60,00 L 50,30 L 80,30 L 80,70 L 50,70 L 60,100 Z'

I even put together a little WYSIWYG to help draw custom arrow shapes.

---

Closing this issue now 😁 🐳

[stryju]

👍

[tannerhodges]

I was too excited implementing this to respond yesterday — bravo! Thanks @desandro, really appreciate it.

[simply-simpy]

Is there a tool to generate the arrowShape string? (arrowShape: 'M 0,50 L 60,00 L 50,30 L 80,30 L 80,70 L 50,70 L 60,100 Z')

[desandro]

@simply-simpy Most common way would be to use a vector file:

• scale art to 100 x 100
• save file as SVG
• open file in text editor
• copy the d attribute value from <path> element

[mdmoreau]

Are there any plans to allow usage of an xlink:href for the SVG so we could use a symbol from an existing sprite? I guess that would probably end up working similarly to #50 (comment)

[desandro]

@mdmoreau Sorry, nope.

[intelligence]

@desandro I really think the use of sprites should be rethought. Currently working on a project with sprites as per https://css-tricks.com/svg-use-with-external-reference-take-2/. Would be really handy to make it work with Flickity.

[designifyer]

Is there any way of adding HTML for prev and next ?

[8888clockradio]

I had issues with that too, solved by mocking up arrow in illustrator and copying the location to all my vector-points.

…

Sent from my iPhone

On Jan 15, 2017, at 1:32 PM, designifyer ***@***.***> wrote: Is there any way of adding HTML for prev and next ? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[desandro]

@designifyer You can hook up your own buttons in HTML. See custom navigation UI

[designifyer]

@desandro Got it. Thank you!

[paulmz]

Am I missing an option where I can just assign a custom PNG as an arrow?

[simply-simpy]

I believe you would need to write the CSS yourself.

…

On Jul 14, 2017, at 8:57 AM, Paul M. Zahorosky ***@***.***> wrote: Am I missing an option where I can just assign a custom PNG as an arrow? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#50 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAkNZK6SclaMOx1rbwdpQPNPefQD4Ol4ks5sN4_VgaJpZM4DgLSQ>.

[paulmz]

I tried that- targeting the .flickity-prev-next-button.previous and .flickity-prev-next-button.next and attempting to add a background image- no go.

[simply-simpy]

I've done it before, you may want to drop a question on Stack Overflow.

…

Sent from my iPhone

On Jul 14, 2017, at 9:52 AM, Paul M. Zahorosky ***@***.***> wrote: I tried that- targeting the .flickity-prev-next-button.previous and .flickity-prev-next-button.next and attempting to add a background image- no go. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[nettymaza]

Hi there! What if you have two different paths in your arrow svg? I understand I can combine them, but I'd like to keep them separate for animation purposes.

[desandro]

@nettymaza If you want custom buttons that you can animate separately, then you can build your own navigation buttons that hook into Flickity's API. See Custom navigation UI

[misterjtc]

Has anyone tried using Font Awesome Icons with this method? I am trying to do it with their left arrow icon and I get just get an empty circle. :(

[EldinZaimovic]

Has anyone tried using Font Awesome Icons with this method? I am trying to do it with their left arrow icon and I get just get an empty circle. :(

You can try this
const ArrowShape = 'M20.1792 44.6892L62.291 2.20244C65.2017 -0.734146 69.9083 -0.734146 72.788 2.20244L79.786 9.26273C82.6967 12.1993 82.6967 16.9478 79.786 19.8532L49.9671 50L79.817 80.1156C82.7277 83.0522 82.7277 87.8007 79.817 90.706L72.819 97.7976C69.9083 100.734 65.2017 100.734 62.322 97.7976L20.2101 55.3108C17.2685 52.3743 17.2685 47.6257 20.1792 44.6892V44.6892Z';

[Asef00]

Has anyone tried using Font Awesome Icons with this method? I am trying to do it with their left arrow icon and I get just get an empty circle. :(

You can try this const ArrowShape = 'M20.1792 44.6892L62.291 2.20244C65.2017 -0.734146 69.9083 -0.734146 72.788 2.20244L79.786 9.26273C82.6967 12.1993 82.6967 16.9478 79.786 19.8532L49.9671 50L79.817 80.1156C82.7277 83.0522 82.7277 87.8007 79.817 90.706L72.819 97.7976C69.9083 100.734 65.2017 100.734 62.322 97.7976L20.2101 55.3108C17.2685 52.3743 17.2685 47.6257 20.1792 44.6892V44.6892Z';

I think it's a chevron, not an arrow.

[djekanovic]

Please add this to the docs:
https://demo.tannerhodges.com/flickity/sandbox/arrow-shape.html

Arrow needs to be 100px x 100px
It's not very user friendly at the moment when someone want's to add custom SVG arrow. As not any will be 100px x 100px. And also if fix can be provided for that so that basically any svg path can be used without going in and modifying it.