Two HTML embeds on page. Only one works

[sparky]

Services page of https://preview.webflow.com/preview/echo-geo?preview=7a9097516c0a6f5b1a5b8ca1e711544e

Hi,

I have added an html embed to create a draggable slider taken from https://codepen.io/dudleystorey/pen/HkwBo. It can be seen under ‘Post Stack Data Conditioning’ on this page http://echo-geo.webflow.io/services

It works as its should but I need to have two more of these sliders on the page using different images. I have added another draggable slider beneath ‘Opportunity Identification’ and plan to replace the images. However, this slider doesn’t work. The bar can be dragged but it doesn’t affect the images.

I’m not a developer so am clearly missing something. Would really appreciate it if someone could help me out with some advice!

Thanks

[donaldsv]

The last time I had this problem it was because of the HTTPS.. so your website + your embed have to use HTTPS or HTTP. You can't have both So just take a look, maybe that's the problem!

[sparky]

Thanks very much for your reply.

The website is HTTP so I guess the easiest thing is to change embed to match. I have changed the source for both images to HTTP (with no result). Is that what you mean or should it be changed in another way?

Thanks!

[donaldsv]

The source website need to be HTTPS or HTTP... So you can't just change it manually. If you have HTTPS on the embed, you have to buy a SSL certificate for your domain name and activate the HTTPS for exemple. So if one out of two embed works correctly, just try to match the other one with the same HTTP(S) process. Of course I highly recommend to test it beforehand on an existing server.

You can take a look at my topic :

Embed code using http source url does not work with https site

Hey there! My embed form doesn't work on my exported website. On the webflow live website it works perfectly! here's the link : http://agenceink.webflow.io/contact-en exported : https://agenceink.com/contact-en.html here's a screenshot of the live VS exported website : [image][image] And finally, here's my code : > <!-- Easy Forms --> > <div id="c8"> > Remplissez mon <a href="http://commande.agenceink.com/app/form?id=8">formulaire en ligne</a>. > </div> > <script type="text/javascript"> > …

[sparky]

Thanks again for your reply.

It seems the issue you were having is different in that your form didn’t work when published. What I can’t understand here is that the draggable slider works perfectly when published. It even works if I paste the embed code on a different page on the same site. It is only if the second slider is on the same page as the first that it doesn’t function.

Has anybody experienced anything similar?

[sparky]

I suspect it may be something to do with using the same script twice on one page? I have tried changing the name of the properties in the second slider and thought at first this had worked as this slider is now working. Unfortunately the first slide is now not working.

Would be really grateful for any advice!

[samliew]

You can't have duplicate IDs on the same page, so simply append the number 2 to anything referring to an ID in the second instance.

[sparky]

Thanks very much! I had tried changing the name of the IDs previously but double checked and had missed one and it’s now working.

Very much appreciate it!