Need multiple button on a slider

Ask the Community General Questions
1

Slider functionality is limited. There should multiple buttons on the slider.

2 Likes
3

Greetings and welcome to the Elfsight family, @Shahid_Amin_Khatana :waving_hand:

You can add multiple slides using the Slide Builder type of slides:

image
image322Ă—367 5.83 KB
image
image330Ă—531 9.3 KB

image
image327Ă—504 10.7 KB
image
image1008Ă—740 21.5 KB


Check it out and let me know if it worked for you :slightly_smiling_face:

1 Like
4

WOW that was quick,
and can we add these two button in a single row?

1 Like
5

Sure! Please specify the ID of your widget and our devs will create a CSS code for this :slightly_smiling_face:

6

Dear Max,

I would like to share a few observations based on my recent experience integrating your widget into my website:

  1. Although I am able to implement the required changes using CSS, I initially assumed that some of these functionalities—particularly the slider positioning and adjustments—could be handled via drag-and-drop, which would have been more intuitive.
  2. Furthermore, while copying and embedding the code into my website, I noticed that the slider was not rendering properly. Upon review, I observed that widgets developed using Elfsight experience a noticeable delay in loading.

As a result, on initial page load, the section appears empty to the end-user, and the content suddenly appears after a few moments, which may affect user experience and engagement.

1 Like
7

You can change the vertical order of the slider elements via drag-and-drop, but to place two buttons in one row, you’ll need a CSS code.

As for the loading issue, please send me a link to the page, where your widget is installed. I’ll be happy to look into this for you :slightly_smiling_face:

8
1 Like
9

This page is password protected. Could you please share a password in a direct message?

For this, click on my profile image and choose Message:

image
image804Ă—392 46.6 KB

10

Thanks for sharing the password! I’ve checked your website and couldn’t find the widget there.

If you’ve removed it, could you please add it back or install to the test page?

11

If you wait on the page for few seconds you will notice that the store finder widget will apear.

1 Like
12

Does the loading issue occur with the Slider or Store Locator widget? Should the widget with this issue appear on the homepage?

13

By the way, here is the CSS code to display buttons in 1 line:

@media screen and (min-width: 640px) {
	[class*='Builder__Content-sc'] {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, fit-content(100%));
	}

	[class*='Block__BaseBlock-sc']:nth-child(1),
	[class*='Block__BaseBlock-sc']:nth-child(2) {
		grid-column: 1 / -1;
	}

	[class*='Builder__Content-sc'] > :nth-last-child(1) {
		justify-content: start !important;
		transform: translateX(10px);
	}

	[class*='Builder__Content-sc'] > :nth-last-child(2) {
		justify-content: end !important;
		transform: translateX(-10px);
	}

}


This code will work only on devices with a screen width of 640px or greater. For devices with narrower screens, it’s impossible to place the buttons in 1 line.

Try it out and let me know if it worked :slightly_smiling_face:

1 Like