Image Slider widget: Remove pagination sign and align on webpage

  • Profile Image
    bdoodle
    Asked on September 22, 2019 at 12:13 PM

    I'd like to get the image slider widget to appear in the middle of my page and to prevent the display of the little circles used for moving to a specific image. I'd like to keep the <> to go forward and backward through the images, but not the little circles.  I tried various things to center the image slider itself to no avail.  To get rid of the little circles, I tried adding the following to the CSS of the widget in my form:

    .slidesjs-pagination {
        display: none !important;
    }

    ...but that didn't work.   What am I doing wrong?

    Thanks for your help.

  • Profile Image
    Augustine_O
    Answered on September 22, 2019 at 01:06 PM

    Hi,

    Unfortunately, custom CSS does not apply to card forms but you can try hiding the Image Slider Control in the widget setting. (See image below)

    1569171274The Easiest Online Form Builde

    To align your form to the middle of your webpage, you can try using the iFrame code to embed the form on your webpage or turn on the SMART EMBED option of the form Embed code. You may also wish to fit your form (images) to a fullscreen mode on your website, you can try turning on the FULLSCREEN option as well. 

    1569171819The Easiest Online Form Builde

    1569171847The Easiest Online Form Builde

    I hope this helps. 

    Please, let us know if you need any further help and we will be more than happy to help. 

  • Profile Image
    bdoodle
    Answered on September 22, 2019 at 01:39 PM

    Thank you for telling me how to turn of display of the controls.  Is there any way to do that only when the screen size is small?

    I was unable to utilize any of your suggestions for centering the widget on the page.  All the Fullscreen switches and the Smart Embed switch were locked off.   I don't really want the fullscreen option anyway.  I already am using the iframe embed method, but that alone does not help me.  Isn't there some way to get the widget to appear in the middle of the page without hardcoding margins at every media point?

  • Profile Image
    ashwin_d
    Answered on September 22, 2019 at 02:34 PM

    I did check your form "" and found that you are using classic form layout. Please use the following custom css code in your widget and see if that solves your problem:

    ul.slidesjs-pagination {

        display: none !important;

    }

    If you just want to hide the pagination in mobile device, please inject the following custom css code in your widget:

    @media only screen and (max-device-width: 480px) {

    ul.slidesjs-pagination {

        display: none !important;

    }

    }

    The following guide should help you how to inject custom css code in widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    I would suggest you to please share a screenshot on how the widget is appearing in mobile device and we will take a look.

    We will wait for your response.


  • Profile Image
    bdoodle
    Answered on September 22, 2019 at 04:46 PM

    The above custom CSS for the image slider widget for devices with screen size less than 480px did not appear to work, but the pagination override code not for a small screen did work...but only on a larger screen!  It still shows the pagination controls on the iphone.  (??!!)   This makes no sense.  I'd like to get rid of the pagination circles on all sized screens or only on small screens.

    I'd still like to center the slider on the page as well. 

    Any ideas?

    Here's the CSS I now have in the Widget:

    1569184997Jotform_Gallery_WidgetCSS.JPG

    Here's an image of the slider taken on iphone 5 in landscape view:

    1569184329Jotform_Gallery_Iphone5.PNG

    Here's an image taken on my desktop:

    1569184389Jotform_Gallery_Desktop.JPG



  • Profile Image
    EltonCris
    Answered on September 22, 2019 at 05:33 PM

    Here's how to fix it;

    1. You have embedded the form source code into a 3/4 column div container so you need to change it to a full-width column (100% width). Example:

    2. To get rid of pagination in all screen sizes, please use the following CSS code. It's the same code my colleague has provided but I added a new CSS for centering the images on mobile. This CSS should be injected within the image slider widget. Guide: How to Inject CSS Codes to Widgets

    .slidesjs-pagination {

        display: none !important;

    }

    @media screen and (max-width:480px){

    .slidesjs-container {

        width: 100% !important;

    }

    .slidesjs-control {

        width: 100% !important;

    }

    }


    3. Finally, inject the following CSS code to your form (not within the widget settings) to expand the form in its full width. Guide: How to Inject Custom CSS Codes

    .form-all {

        width: 100% !important;

    }

    It should look like this afterward;

  • Profile Image
    bdoodle
    Answered on October 01, 2019 at 12:42 AM

    Thank you.  That helped.  However, I still have a problem with this.  The image slider looks fine on a desktop screen and my iphone5 screen held in Portrait view. When I hold the iphone in a landscape view, however, the images in the slider are stretched wider than the original.   See snapshots below.  Please tell me how to prevent that. Thank you!

    Image slider shown on iphone in portrait view:

    1569904840IMG_1314.PNG

    Image slider shown on iphone in landscape view:

    1569904878IMG_1313.PNG

  • Profile Image
    ashwin_d
    Answered on October 01, 2019 at 01:48 AM

    I would suggest you to please remove the following custom css code displayed in screenshot below and see if that solves your problem:

    1569908900iframe.png

    Hope this helps.

    Do get back to us if the issue persists.

  • Profile Image
    bdoodle
    Answered on October 25, 2019 at 11:53 AM

    The slider images look ok at all sizes except between 480 and 880 ish and between 992 and 1200 ish.  At sizes in those two ranges, some of the width is cut off.   My webpage code does not display the blank side space divisions when the screen size is < 992, and the div containing the gallery form is made full size when screen size is <992.  

    I could make my gallery division full size when screen size < 1200 and that might fix the problem between 992 and 1200, but what about when the screen size is between 480 and 880?  I notice that the whole images are a good deal smaller (~300 x 300) when screen size is < 480.  Is there some way to reduce their size from about 780 x 780 to about 480 x 480px when the screen size is between 481 and 992?

  • Profile Image
    bdoodle
    Answered on October 25, 2019 at 12:27 PM

    I tried making the gallery div full size when screen size < 1200 as I described above, but it did NOT help.  WHen the screen size was between 992 and 1200, the image slider appeared at the left of the screen with a lot of space to the right, and that space cut off the right side of the images.

    See snippet: (Note that I did this locally and not on the server.)

    1572020767JotformImgSlider.JPG



  • Profile Image
    bdoodle
    Answered on October 25, 2019 at 02:53 PM

    I removed the extraneous divisions on my webpage. I just have a navbar, footer, and the gallery form within a couple container divs. It works better.  The only problem now is when screensize is between 480 and 780, the latter being the width of the gallery itself.  When screensize is < 480, the images are reduced in size to a little over 300px through nothing I've done.  Is there some way to reduce the image sizes from about 780 x 780 to about 480 x 480px when the screen size is < 800?

  • Profile Image
    Mike_G
    Answered on October 25, 2019 at 05:29 PM

    Please give me some time. I'll try to work on a solution for your concern and I'll get back to you as soon as possible.

  • Profile Image
    Mike_G
    Answered on October 25, 2019 at 06:58 PM

    Apologies for any delays.

    To fix the issue, please try replacing the existing CSS codes injected in the custom CSS tab of the Image Slider widget in your form with the CSS codes below.

    .slidesjs-pagination {

        display: none !important;

    }

    .slidesjs-control img {

        width: 100% !important;

        height: 100% !important;

    }

    @media only screen and (min-width:481px) and (max-width: 799px){

    .slidesjs-container {

        width: 480px !important;

        margin: auto;

        height: 480px !important;

    }

    .slidesjs-control {

        height: 480px !important;

        width: 480px !important;

    }

    }

    @media only screen and (max-width: 480px) {

    .slidesjs-container {

        width: 300px !important;

        margin: auto;

        height: 300px !important;

    }

    .slidesjs-control {

        height: 300px !important;

        width: 300px !important;

    }

    }


  • Profile Image
    bdoodle
    Answered on October 26, 2019 at 10:19 AM

    Thank you.

    I put your CSS into the widget and got the following results:

    Even just the raw form, not embedded in my webpage,

        The images are never larger than 480px... at any screen size

        When the screen size < 799 and > 480, the right side of the images gets increasingly cut off.

  • Profile Image
    VincentJay
    Answered on October 26, 2019 at 11:23 AM

    Please give me more time to read the thread and understand it properly. It may take a while but once I have an answer I will contact you again.

    Thank you.

  • Profile Image
    bdoodle
    Answered on October 28, 2019 at 01:48 PM

     Any update on this question?

  • Profile Image
    VincentJay
    Answered on October 28, 2019 at 02:07 PM

    Sorry for the late reply.

    I was able to replicate the issue you're referring to wherein the images are cut off in mobile landscape mode. Here's a screencast:

    1572285675vadva3.gif

    In order to fix that, you need to insert this CSS media query that targets the width of the widget and apply this code:

    @media only screen and (min-width: 481px) and (max-width: 799px) {

    iframe#customFieldFrame_2 {

    width: 500px !important;

    }

    Here's a guide on how to add it to your form: 

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

    Here's the result of my cloned form:

    1572286015fds3.gif

    I hope this helps. Please contact us again if you need help.