issues with wiidth and height

  • Resolved Adrian

    (@locka)


    9 years, 9 months ago

    Thanks for adding this wonderful slider\carousel to foogalleries however I’m having a few issues. I’m setting it up to be a slide so one photo at a time however it always wants to make the slide same width as the page rather than width I’ve set for it. I’ve also notice that dots for the pagination are staying in the same spot and not moving up in line with the different height of the image.

    Ultimately what I like to do is have it so that the image is centred both in hight and width from a set point on the page.

    Ie have area for the slider and all slides are centred in that area. I realise that this slider does not do this natively but at the moment I’m just trying to get it work as I’ve seen on the owl carousel web site.

    I’m afraid my site is not live yet so unable to show what I mean.

    https://www.ads-software.com/plugins/foogallery-owl-carousel-template/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Matt Cromwell

    (@webdevmattcrom)

    Hi there,

    Yes, Owl is intended to always fill the available width, so if you want your slides to not be stretched you’ll want to size them according to your available width.

    If you want the carousel to only fill a portion of the width, you’ll need to create a div with a max-width, like this <div style="max-width: 400px"></div> And put your Gallery inside that div.

    The pagination buttons go to the bottom of the heighest image. There is an experimental auto-height feature in Owl.js but I’ve found it to be buggy, that’s why I haven’t implemented it yet.

    Also, regarding the stretching of images, take a careful read of the docs so you fully understand how Owl does images responsively:
    https://docs.fooplugins.com/foogallery/foogallery-owl-carousel-documentation/

    Thanks!

    Thread Starter Adrian

    (@locka)

    Thanks for the reply I’ve added a div tag around the image and that works fine to set the max width of the image It’s now a better size.

    Really though I need the images which have different widths and heights depending on the image centre it in the middle of my div. As not all photos in the slider will always be the same heigh and width, they will however all be landscape in shape.

    Seen this example

    https://css-tricks.com/centering-css-complete-guide/

    .parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    But this did not work correctly

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘issues with wiidth and height’ is closed to new replies.