Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 22, 2014 at 2:58 pm #323036
    danfarberoff

    Hi

    I’ve got several EasySliders on a single page, which mix landscape and portrait images. But because the slider height is flexible and depends on the image height the result is that the page content keeps moving up and down like crazy every time a new slide loads… I’d like to fix the height of the slider and the max-height for the images, but when I do this the images stick to the top of the slider, which means they’re not vertically centered in the slider.
    Here’s the code I’ve used:

    /* Limit height of Easyslider */
.avia-slideshow li img {
    max-height: 400px;
}
.avia-slideshow {
    height: 400px;
}

    How can I fix the height of the slider and the max-height for the images, and get them to center vertically in the slider?

    Thanks!

    September 22, 2014 at 3:07 pm #323044
    danfarberoff

    And a related question:

    I’ve been looking for a third-party thumbnail gallery slider, but can’t find one that works well. Either they slow down the page-load, or they require a separate image upload and don’t use the image gallery thumbnails, or they screw-up the page layout, or their back-end interface is buggy… Basically I’m looking for a thumbnail gallery, with a featured image slider, and a play and pause button. Can you recommend a good one that works well with the theme?

    Thanks.

    September 24, 2014 at 11:03 am #324156
    Ismael

    Hey!

    Thank you for using Enfold and sorry for the delay.

    You can specify a height for the easy slider but it will cut out parts of the images:

    .avia-slideshow ul.avia-slideshow-inner {
height: 500px !important;
overflow: hidden;
}

    You can vertically center the images with this:

    .avia-slideshow li img {
margin-top: -20%;
position: relative;
}

    Adjust the negative top margin.

    Best regards,
    Ismael

    October 3, 2014 at 1:30 am #329389
    danfarberoff

    Thanks Ismael. That didn’t quite do what I needed it to.
    Solved it using a ‘top: 50%;’ on .avia-slideshow and a ‘translateY(-50%)’ command on the .avia-slideshow-inner.

    October 4, 2014 at 2:54 am #330031
    Ismael

    Hey!

    Glad you figured it out. If you still have questions, let us know. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘EasySlider height fix’ is closed to new replies.