Change Carousel Arrow Icon and Position

Ask the Community General Questions
1

How can i change insta feed carousel arrow icon and also i want to put outside of the carousel.

1 Like
3

Hi there, @Yasin_Ilhan :wave:

I’ve passed your request for changing the position of the arrows to the devs. I’ll update you tomorrow :slightly_smiling_face:

And what other changes would you like to apply to the arrows?

4

Thanks for the fast response. I want to change also svg icon.

1 Like
5

Not sure if it’s possible, but I’ll discuss it with the devs as well :slightly_smiling_face:

1 Like
6

Thank you for waiting!

Please try to add this code to the Custom CSS field and let me know if you like the result:

.eapps-instagram-feed-posts-slider-inner {
  width: calc(100% - 120px) !important;
  margin-left: 65px !important;
}

As for changing the arrow icon, please send me your icon file and our devs will try to create a script to replace it :slightly_smiling_face:

7

It looks good right arrow but left one also must be outside of the carousel.

Screenshot 2024-11-08 at 16.23.35
Screenshot 2024-11-08 at 16.23.351162×332 365 KB
I

1 Like
8

Ah, sorry about that!

I’ll double-check it with the devs and let you know once I have their response :slightly_smiling_face:

9

@Yasin_Ilhan The thing is that the previous group of posts shows up under the arrow, and there’s no way to cut it without also cutting off the arrows.

The only workaround is to use this code instead, but the new post slides will be invisible during the switch:


.eapps-instagram-feed-posts-slider-inner {
  width: calc(100% - 120px) !important;
  margin-left: 60px !important;
}

.eui-slider-slide {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.eui-slider-slide-active {
  opacity: 1;
}
10

.eui-slider-slide {
opacity: 0;
transition: opacity .5s ease-in-out;
}

Because of the above it shows opacity 0 for first index of slide. ( in my case 4 items.). So it is initially opacity 0

Screenshot 2024-11-14 at 11.35.55
Screenshot 2024-11-14 at 11.35.551207×369 29.6 KB

1 Like
11

Hi there, @Yasin_Ilhan :wave:

I’ve double-checked things and the code is working correctly:


If it’s working different on your side, please send me a video screencast of what you see :slightly_smiling_face:

12

As you can see when i open web page it shows blank and when click next arrow and back it shows data!

This is my whole css i am using

/* Adjust slider inner width and centering */
.eapps-instagram-feed-posts-slider-inner {
  width: 100% !important; /* Full width for the carousel */
  margin: 0 auto;
 overflow: visible;
}

/* Apply background color, padding, and rounded corners to the entire widget */
.es-post {
  border-radius: 10px;
  box-shadow: 0px 8px 9px rgba(0, 0, 0, 0.2); /* Adjust shadow values as needed */
}

/* Style carousel arrows */
.es-layout-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  z-index: 1;
}

/* Adjust SVG icon position within arrows */
.es-layout-carousel-arrow svg {

  width: 48px; /* Adjust width as needed */
  height: 48px; /* Adjust height as needed */
}


/* Image wrapper padding */
.eapps-instagram-feed-posts-item-image-wrapper {
  padding-top: 130%;

}

/* Image styling */
img.eapps-instagram-feed-posts-item-image {
  top: 0 !important;
  transform: translateX(-50%) !important;
  height: 100% !important;
  width: auto !important;
}


.eapps-instagram-feed-posts-slider-inner {
  width: calc(100% - 120px) !important;
  margin-left: 60px !important;
}

/* Target previous and next arrow icons */
.es-layout-carousel-arrow-prev svg {
    margin: 0px -5px;
    opacity:0.7;
    background-image: url('https://cdn.prod.website-files.com/668e2658fa43b553f913670d/668e300b5e63d7cdd7eb6c14_arrow-left(24x24)%402x%20(5).svg');
    background-size: fill;
    background-repeat: no-repeat;
    fill: none; /* Remove existing SVG color fill */
}

/* Target previous and next arrow icons */
.es-layout-carousel-arrow-next svg {
    margin: 0px -5px;
    opacity:0.7;
    background-image: url('https://cdn.prod.website-files.com/668e2658fa43b553f913670d/668e300a5e63d7cdd7eb6c08_arrow-right(24x24)%402x%20(5).svg');
    background-size: fill;
    background-repeat: no-repeat;
    fill: none; /* Remove existing SVG color fill */
}

/* Hide default SVG path */
.eapps-instagram-feed-posts-slider-nav-icon path {
    display: none;
}

.eapps-instagram-feed-posts-slider-inner {
  width: calc(100% - 120px) !important;
  margin-left: 60px !important;
}

.eui-slider-slide {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.eui-slider-slide-active {
  opacity: 1;
}
1 Like
13

Thank you!

Please try to use this code instead and let me know how it worked:

.eapps-instagram-feed-posts-slider-inner {
  width: calc(100% - 120px) !important;
  margin-left: 60px !important;
}

.eapps-instagram-feed-posts-slider:has(.eui-slider-slide-active) .eui-slider-slide {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.eui-slider-slide-active {
  opacity: 1 !important;
}
1 Like
14

Yeah it worked! Thanks.

I have another question is there any way to change overlay text font?

1 Like
15

This code should do the trick:

.es-post-text {
  font-family: Times New Roman !important; 
}
16

What about custom ones? Does below works?

@font-face {
  font-family: 'Circularweb Book Copy';
  src: url('https://cdn.prod.website-files.com/668e2658fa43b553f913670d/66c8662caf59b24765169b87_CircularWeb-Book%20copy.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
1 Like
17

I’ve checked your website, and it’s working fine:

image
image1858×1080 423 KB

1 Like