How can I have the Image Slider to span the full width of the form?

Hi, I am trying to make the image slider respond in the same way that your jotform footer responds, being that it spans the entire width of the screen no matter what size the jotform is set to. I don't want any space on either side. 

It will be a "full width image slider" and if some edge of the images get cut off depending on screen size, that is ok.

I want to embed the source code into my website. I've tried a few things but can't seem to come up with the solution.

The url is of a cloned form I found in my search (don't know if that matters).

The url my form is currently on is http://bloc.one/home.html

The top image slider is the only thing I added to the form, the rest is cloned and will be changed after I get the slider working.

Thank You!

Just checking. Was my question not submitted because I hadn't verified my email? It is now if that was an issue. 

Thanks

You have just replied here, so I think you've figured out how to access your threads already. Anyways, I'm checking this now. I will let you know once I have the custom CSS codes that are required to do this.

Inject the following custom CSS codes in the form:

li#id_54 {

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

}

iframe#customFieldFrame_54 {

    width: 100% !important;

    height: 450px !important;

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. 

Inject the following custom CSS codes in the widget:

.slidesjs-container {

    width: 100% !important;

    height: 450px !important;

}

img.slidesjs-slide {

    width: 100% !important;

    height: auto !important;

}

Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets. 

Adjust the height value of 450px to your preferred height. You will also need to proportion the image to have a better display. 

Here's a cloned version of your form by the way applied with the given custom CSS:

https://form.jotform.com/90675828741973 

Thank You, however I need to restate my question somehow so that we are on the same page.

Above we see the FULL JotForm banner but not my full image. The highlight is of the scrolling necessary to view full image.

We are trying to eliminate this horizontal scrolling.

No matter what size the form is at on my webpage, the JotForm banner is always maintaining full width. No horizontal scrolling.

That is what I want my image slider to do as well. There must be code being used to achieve this with the JotForm banner.

The last screen shot is how I have left the page for you to view http://bloc.one/home.html

The form used is a clone of the clone you provided.    https://form.jotform.com/90676300686159

Thank You, Please let me know if more info is needed by me to help.

I'm sorry, but I completely understand what you want.

You have to open the form on a new tab because the scrollbar appears in the preview in the form builder only. The form is in a frame while in the preview, so that is why the scrollbar appears.

This is not in the builder and I am not viewing in preview mode, this is on my actual published website.

http://bloc.one/home.html

Here you see that the JotForm Banner and images are not the same width.

I need to know how to make the form behave in the same manner that your JotForm Banner behaves.

As seen in the screen shots I can publish the form any width that I choose, the problem is that the form has to be scrolled horizontally if the screen is a different (smaller) size. Your banner automatically can tell the screen size and matches accordingly.

For instance:

Desktop WIDE screen

Desktop SQUARE screen

In ALL screenshots we see the JotForm Banner displaying perfectly no matter what size the form is displayed at, I'd like that same functionality. 

These 2 above pics are without scrollbars, those screenshots are back up top in the thread. If you need me to republish the site so you can view the scrollbar I'd be happy to (I don't know which published version you'd like to see).

Thanks Again!

Because you used the form full source code embed on your website, everytime you update/modify your form on the Form Builder, you will need to re-embed again using new source code for the changes to take effect.

What I suggest try first instead is to re-embed the form on your website using its iframe embed code.

Getting the Form iFrame Code

Make sure you clean/remove first any previous embedded script codes of the form on the website before you re-embed using its iframe code.

Let us check first the result if using the iframe embed code.

No, I still get scroll bar with iFrame. I just need the same (100% width) code you have used on your banner but for the image slider. 

Your banner is not dependent on the forms width but instead responds to the device used. The other plus for this is that I can still manipulate the margins and etc. of the forms fields without worry that the image slider (and JotForm Banner) are going to distort and cause problems.

Here is an example of the desired image slider effect. It fills the screen by width.

https://smartslider3.com/free-full-width-slider-wordpress/

It is also responsive on mobile. Just like your banner is mobile responsive INDEPENDENT of the forms width.

Thank You

I checked my colleague's form using the direct link and it seems to adjust the image according to the browser/device width, now, I would recommend you to do the following: 

1. Make sure you have injected the code provided on this thread.

2. Make sure you have updated the source code on your form, this means you must copy the code from the publish wizard again and embed this code on your site.

3. Add the following meta tag to your site, this needs to be added between the <head> tags: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Let us know how it goes. 

That did not work. You can view the result at http://bloc.one/home.html

I am aware that I must copy the code each time.

You have to view the actual page http://bloc.one/home.html to understand what I am saying, not the direct form link.

The JotForm Banner still behaves like is supposed to, my form does not. I still get the horizontal scroll bar.

Can you provide what code is used to make the JotForm Banner work responsively, independent of my form and website code and let's see if we can use that as a template to make the form (particularly the image slider) behave in the same manner.

Thanks

My apologies, can I please ask you once more to re-embed the form with its iframe code? 

Getting-the-Form-iFrame-Code

I think the problem can be fixed by adding some codes to the form, but we need to see how it behaves on your web site while working on it. 

Please let us know when form is added so we could proceed. Thank you.

Yes, that iFrame is now on.

It appears that some other elements of your web page have greater width. Please note that form is taking 100% of width of container element. Do you have an option to add codes to the head section of your web page? 

If yes, please add the following code:

<style>

.Preview_float__1PmYU {

  position: unset;

}

.template {

  position: absolute;

}

  body, .template, .Preview_componentWrapper__2i4QI, .Preview_float__1PmYU, .preview_code__2Lr3m, .row {

    max-width: 100% !important;

    min-width: unset;

    width: 100% !important;

  }

</style>

If no, please try to paste this code along with forms code (after iframe). 

Here is a test page: 

https://shots.jotform.com/victoria/v/embed/111%20copy.html 

Let us know how it goes.

No, unfortunately that still has a horizontal scroll bar. 

I'm going to need to use the source code. I frame etc.. gives no control.

I have access to all the backend of my website. 

I'm using the Jotform Banner as the example of what I'm trying to achieve with the image slider in regards to "full width" no matter the device.

In my mind it seems that however your banner is working (with just source code) we can apply the same concept to image slider. 

Thanks For ALL your help in this!!!