Text link change slider images - Support | Kriesi.at

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
February 13, 2017 at 5:24 pm #746527

Designweb
Participant

Hello,

I create two arrows links and i want to change slider images. How can i do that? I use fullwidth easy slider and i want to make two buttons, like Slideshow control styling.

Can you help me, how can i do that?

February 15, 2017 at 5:38 am #747262

Rikard
Keymaster

Hey Designweb,

Thanks for the details, though we need a URL as well to be able to log in.

Best regards,
Rikard

February 15, 2017 at 10:05 am #747386

Designweb
Participant

Hello Rikard,

The slider has two arrows which i has created custom. I want to find a way to make that arrows functionality. Up arrow (go to next slider) and down arrow (go the previous slider).

Thank you.

February 16, 2017 at 5:46 am #747790

Rikard
Keymaster

Hi,

Ok, thanks for the info. I’m not sure why you would want to build a custom slider though? There are plenty to chose from by default in the theme. Maybe you could try one of those first? I think it would be easier to customise an existing slider if you want something different.

Best regards,
Rikard

February 16, 2017 at 10:04 am #747874

Designweb
Participant

Hello Rikard,

which option allows to me to insert two arrows on the slider? I use fullwidth easy slider and i want to make two buttons(arrows), like Slideshow control styling.

Thank you

February 16, 2017 at 3:13 pm #747984
Yigit
Keymaster
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
.avia-slideshow-arrows a.prev-slide:before {
    color: transparent;
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.avia-slideshow-arrows a.next-slide:before {
    color: transparent;
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
```
Best regards,
Yigit
February 16, 2017 at 4:19 pm #748013

Designweb
Participant

Hello,
that code doesn’t work.
Go to my site at home page (put logo link to see that). I have create with handed code in the first slider two arrows(up & down) and i have put that code to Fullwidth Easy Slider > first element > caption > caption text.

I have put a class to manipulated that element. The code is <div class=”icon_arrow”> > </div> and with css i have rotate that character.

I want a way to change the slider images. If someone put that link to go next slider(up arrow) or previous slider(down arrow).

How can i do that?

Thank you

February 16, 2017 at 4:26 pm #748020

Yigit
Keymaster

Hi!

Please edit your slider and set “Slideshow control styling?” to default then add the code to Quick CSS.

Cheers!
Yigit

February 17, 2017 at 10:52 am #748320

Designweb
Participant

Thank you very much Yigit.

That works, but i have a little problem with position when change screen resolution. Screen resolution more 1366px change the position of arrows in slider.

How i can use the right code to CSS, don’t change position when screen resolution increase.

Thank you

February 17, 2017 at 1:51 pm #748409
Yigit
Keymaster
Hey!

You can change the code to following one
```
@media only screen and (min-width: 990px) {
.avia-slideshow-arrows a.prev-slide:before {
    color: transparent;
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.avia-slideshow-arrows a.next-slide:before {
    color: transparent;
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}}
```
For more information on using media queries, please see – https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Cheers!
Yigit
February 17, 2017 at 2:54 pm #748467

Designweb
Participant

Nope, it doesn’t work on scrren resolution 1920×1080. In that resolution the arrows change positions.

February 17, 2017 at 2:56 pm #748473
Yigit
Keymaster
Hi!

Please change the code to following one
```
@media only screen and (max-width: 1920px) {
.avia-slideshow-arrows a.prev-slide:before {
    color: transparent;
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.avia-slideshow-arrows a.next-slide:before {
    color: transparent;
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}}
```
I am not super clear on the issue you are having so please elaborate if that does not help. Please note that forums are currently very busy and we are trying to keep customizations to minimum

Regards,
Yigit
February 17, 2017 at 3:18 pm #748491

Designweb
Participant

Nope. Thank you for quick answer.
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Text link change slider images’ is closed to new replies.