\n\nSpecifying a starting position with `data-startingposition` lets you focus the users attention on the part of the image where the change is most noticeable. To toggle the visibility of the labels and the credits respectively, set `data-showlabels` and `data-showcredits` to false. And to disable the animation, set `data-animate` to false.\n\nIf you are using Juxtapose in an existing responsive iFrame solution like [pym.js](http://blog.apps.npr.org/pym.js/) and don't want to use Juxtapose's built in (but faily opinionated) responsive iFrame solution, you can set `data-makeresponsive` to false.\n\n####Javascript Implementation\nThe `JXSlider` class takes three arguments. First, is the string of the ID of the element you want to turn into a slider. Second is an array of two objects. Each object *must* have `src` defined and can optionally define a `label` and a `credit`. The third argument lets you set additional options for the image slider.\n\n
\n \n\n###Modifications\n####CSS\nYou can customize how JuxtaposeJS looks by modifying its CSS. For instructions, [click here](https://github.com/NUKnightLab/juxtapose/wiki/Styling-the-Slider).\n\n####JavaScript\n\nThe JXSlider class contains a few methods you can use to modify your sliders.\n\nIf you instantiated your sliders with the HTML method but still want to access one of your sliders programmatically, JuxtaposeJS creates an array of the JXSliders on your page that you can access with `juxtapose.sliders`.\n\nJXSlider.**updateSlider**(*percentage*, *animate*)\n\n*Percentage* indicates where you want to set the handle relative to the left side of the slider. If you set *animate* to `true`, the handle will animate to the new location; if animate is set to `false`, the handle will not.\n","maintainers":[{"name":"duner","email":"asduner@gmail.com"}],"time":{"modified":"2022-06-19T07:31:13.370Z","created":"2015-10-19T16:21:48.321Z","1.1.6":"2015-10-19T16:21:48.321Z"},"homepage":"http://juxtapose.knightlab.com","keywords":["image","ui","slider","juxtapose","before","after"],"repository":{"type":"git","url":"https://github.com/NUKnightLab/juxtapose.git"},"contributors":[{"name":"The following people have contributed code to JuxtaposeJS:"},{"name":"* Alex Duner","url":"@asduner"},{"name":"* Joe Germuska","url":"@JoeGermuska"},{"name":"* KK Rebecca Lai","url":"@kkrebeccalai"},{"name":"* Mallory Busch","url":"@yeamal"},{"name":"* Alison Benjamin","url":"@radiocontrolled"},{"name":"* Michael Bauer","url":"@mihi_tr"}],"author":{"name":"knightlab@northwestern.edu"},"bugs":{"url":"https://github.com/NUKnightLab/juxtapose/issues"},"license":"MPL-2.0","readmeFilename":"README.md"}
![](\"http://example.com/firstimage.jpg\")
\n ![](\"http://example.com/secondimage.jpg\")
\n ![](\"http://image.jpg\")
\n\nIf each image has an `data-label` attribute defined, the slider will display a label on each image. If each image has a `data-credit` attribute defined, the slider will display a credit for each image.\n\nThe main wrapper can also take some additional attributes as well to specify a few options:\n\n