Customize Appearance of Back/Next Arrows

Question

Is it possible to control the size of the back/next arrows? For a particular project, I'd like for them to be smaller.

Answer 1

Yes, you can create your own .css file and attach it using the Resources section of the in5 dialog. Here are 2 different CSS code snippets that will shrink the arrows to half size for example...

---

Note: In newer versions of in5 (v3.1+), the navigation arrows are standard to all page formats and accessed with the following CSS:

nav#page-nav > button { }

nav#page-nav > button:hover { }

nav#page-nav > #backBtn { }

nav#page-nav > #nextBtn { }

---

A) This ways is a bit easier but it relies on the browser supporting CSS transforms.

.anythingSlider-in5 .arrow a {

    -ms-transform: scale(0.5, 0.5); /* IE 9 */

    -webkit-transform: scale(0.5, 0.5); /* Chrome, Safari, Opera */

    transform: scale(0.5, 0.5);

}

 

OR

 

B) This way involves a bit more tweaking, and is also not supported in IE8 due to the background-size property.

 

.anythingSlider-in5 .arrow a {

    background-size: 200% auto;

    height: 34px;

    margin: -34px 10px 0;

    width: 34px;

}

 

It may be easier to make tweaks to the CSS while you're testing using the browser inspector.

 

Comments

Hi
Thanks for the support.

How could I change the color of the arrows? or change the image? Is it possible?
With the previous plugin (2) I could do it.

---

You can do it in v3 too. This is the CSS that sets the button image in the current version:

nav#page-nav > button {
    background:url(../images/arrows-slider.svg) no-repeat;
}

It's a single (back) arrow that is rotated to get the next arrow.

You can simply replace that image, or re-assign it with custom CSS that you attach as a resource.

---

Hi, thanks
I replaced the image and the arrow disappeared. I imagine I did something wrong, don't worry.

---

Hmm...yep, I'm sure it's fixable. Send me the files as you've edited them.
https://ajarproductions.com/pages/contact.php?category=in5

---

I fixed it with adding this css with my arrow, thanks:
nav#page-nav > button {
    background:url(../images/arrows-slider.svg) no-repeat;
}