Support » Plugin: MetaSlider » Flex Slider dots problem

  • Resolved LV

    (@lordvader)



    I use the Flex Slider with dots enabled.

    When I add more than 18 pictures to the slide the other remaining dots
    will be added as a row under the first 18 dots.

    When viewing the pictures and I come across one that is taken in portrait
    then it shows over the first row of 18 dots. This looks not so nice.

    My suggestion would be that when adding more than let´s say 16 pictures
    an arrow to the right appears so users could click on it to see more pictures.
    Also on this moment an arrow to the left appears so that users could go back.

    Hope this is useful to you.

    Regards,

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Contributor DNutbourne

    (@dnutbourne)

    Hi,

    Thank you for the suggestion.

    If using both landscape and portrait slides, we recommend using the ‘Disabled (Smart Crop)’ option for Image Cropping (found in the Advanced Options). This will ensure all slides are the same height.
    https://www.metaslider.com/documentation/image-cropping/

    LV

    (@lordvader)

    Hi,

    Yw for the suggestion.

    Indeed I used this option. And yes the heights are all the same,
    but only when a portrait picture comes up it goes over the dots.
    Strange.

    Plugin Contributor DNutbourne

    (@dnutbourne)

    Hi,

    It is possible that some CSS from the theme or another plugin has resized some element of the slider. Could you send a link to the page the slider is on, and I can take a look.

    LV

    (@lordvader)

    Hi,

    I disabled all the plugins. Result the same.
    Tried another theme. Result the same.

    Hope this information helps.

    Direct link is:
    http://raymondprins.com/metaslider/

    Regards,

    Plugin Contributor kbatdorf

    (@kbat82)

    Hey @lordvader, you can just fix this with some CSS.

    Try this:

    .metaslider .slides {
        display: inline-block;
    }

    And if you want some more space you can add margin-bottom too.

    For the dots, just experiment with the margins. It depends on the design you want.

    .metaslider .flexslider .flex-control-nav {
        margin: 0 0 0 -5px;
    }
    LV

    (@lordvader)

    Hi @kbatdorf,

    I put this code in the “Customising Additional CSS” of my theme.
    ( hoped that this was the right place to put it in ).

    And it works great, thanks!

    The part of “margin: 0 0 0” could you explain that to me?
    I tried some values, but didn’t noticed any different layout to the dots.
    Want to have a little more space between the bottom of the picture and the
    top of the dots.

    Thanks again, this looks already so much better!

    Regards,

    Plugin Contributor kbatdorf

    (@kbat82)

    Awesome! If you want to adjust the margin a little more you would need to add it to the .slides rule, something like this:

    .metaslider .slides {
        display: inline-block;
        margin-bottom: 2rem;
    }

    the second rule above is for the spacing between the dots. If you need to read up on how the margin property works, here’s a good resource

    but it’s basically margin: top right bottom left. Maybe you left off the final -5px?

    If you’re in Chrome browser you can right click on a dot to inspect and edit the CSS properties without worry to just see what looks best for you. I there you will see the 0 0 0 5px rule set.

    Plugin Contributor kbatdorf

    (@kbat82)

    dots

    LV

    (@lordvader)

    Thanks for the info and I played with it. But I’m not a programmer, so this stuff is way over my head.

    Is there a ( simple for me I hope ) way to add this css to my site if I change
    from them? Or try some different ones so I don’t have to copy it every time?

    Again thanks for making it work!

    Plugin Contributor kbatdorf

    (@kbat82)

    Hi @lordvader,

    There’s some plugins that offer adding styles to themes. I don’t have one to recommend though, unfortunately. Try a search for “css plugin”. That would probably be your best option.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Flex Slider dots problem’ is closed to new replies.