Flexslider doesn't adjust the height of the viewport when displaying a shorter image in the slideshow

Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there a solution for this issue?

Check out the live draft here:

HTML:


    <div class="flexslider">
        <div class="arrows">
            <img src="../img/arrow-left.png" class="arrow-left pull-left">
            <img src="../img/arrow-right.png" class="arrow-right pull-right">
        </div>
        <ul class="slides" id="slideshow" ondragstart="return false;">
            <li>
                <img src="../img/residential/project-01/img-01.jpg" />
                <div class="flex-caption right hidden-xs">
                    <div class="caption-content">
                        <p><span class="hcaption">PROJECT <span class="sm-spaced">1</span></span><br /></p>
                        ...
                    </div>
                </div>
            </li>
            ...
        </ul>
    </div>

CSS:


.flexslider {
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}
...
htmlcssflexslider

Answer №1

If you want to enable smooth height adjustment in flexslider using JavaScript, use the following property:

smoothHeight: true

See example below:

$('.flexslider').flexslider({
    animation: "slide",
    smoothHeight: true
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Currently, I am in the process of integrating a logo carousel into my React web application using CSS. My goal is to create a slider that loops infinitely, with the last logo seamlessly transitioning to the first logo and continuing this cycle indefinitely ...

cssreactjstypescriptsliderinfinity

Next.js fails to properly render external links when utilizing the Link component

It was quite surprising to discover that a basic Link component doesn't function as expected in Next.js when attempting to use it with an external URL and HTML Button tag within. Here is my attempt at solving this issue: Attempt 1: <Link href="h ...

javascripthtmljsxnext.jsuicomponents

Encountering difficulties while using JavaScript to complete a form due to issues with loading the DOM

Currently, I am attempting to automate the completion of a multi-page form using JavaScript. Below is the script that I am utilizing: // Page 1 document.getElementById("NextButton").click(); // Page 2 completion(document.getElementById("Rec ...

javascripthtml

Contact form repair completed - Messages successfully delivered

I am facing an issue with the contact form on my HTML landing page. Currently, when you click the 'Submit' button, it redirects to a new PHP page displaying 'Success'. Is there a way to make it so that upon clicking 'Submit' a ...

javascriptphphtmlformscontact-form

Activate the saturation toggle when a key is pressed in JavaScript

I am trying to modify a script that currently toggles the value of a variable when a key is pressed and then lifted. Instead of changing the variable value, I would like to adjust the saturation of the screen based on key presses and releases. How can I ac ...

javascripthtmljquerycssfrontend

Send the selected option from the dropdown menu to a different page

I am in the process of designing a unique shopping cart system where, upon clicking on the "add to cart" link, both the selected quantity from the drop-down menu and the product ID are transmitted to the addCart page. While I have successfully managed to p ...

phphtmlmysql

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

On my webpage, I have implemented two buttons - "read more" and "read less", using a Page Builder in WordPress. The goal is to hide all elements on the page after the "Read More" button upon loading. When the button is clicked, the "Read More" button shoul ...

javascripthtmlcss-selectorsevent-handlingdom-events

Utilizing the value selected in a form to trigger an action method without the use of a query

I am currently utilizing pug to generate pages for my nodeJS server. In this particular case, I am attempting to use the value selected in a form select option to dynamically change the action method. Essentially, the goal is to utilize the group name sel ...

htmlnode.jsformspug

Closing the space between vertical edges of table data cells

I'm currently in the process of translating my resume from MS Word to HTML and CSS for easier maintenance and sharing purposes. I really like the layout and style of my resume and want to maintain it. The design features a left column with bold titles ...

htmlcsshtml-table

Transform a REACT js Component into an HTML document

I'm working with a static React component that displays information from a database. My goal is to implement a function that enables users to download the React component as an HTML file when they click on a button. In essence, I want to give users ...

javascripthtmlreactjs

Tips for minimizing the arrow size in the infowindow on a Google Maps interface

As a newcomer to customizing Google Maps, I am looking to decrease the size of the arrow in the infowindow and position it in the bottom left corner for a better appearance. I am struggling to figure out how to adjust the height and width of the arrow and ...

jquerycssgoogle-mapsgoogle-maps-api-3

Finding the height of a dynamic div in ReactJS when no CSS height is set

I'm encountering an issue when trying to determine the height of a dynamically created div that doesn't have a defined CSS height property. I'm working with React JS and have attempted to use jQuery, pure JavaScript, and React tools to acces ...

htmlreactjsheight

Retrieve information from the text input field and proceed with the action outcome

Currently, I am in the process of developing a form on an asp.net website. The objective is to have users land on a page named Software, where two variables are checked for empty values upon loading. If the check reveals emptiness, the Software View is ret ...

htmlasp.net

Submitting form data from an HTML page to a specific Skype account is a straightforward process that can be easily accomplished

[Situation] A new feature is being considered for a feedback form that would allow users to input their name, email address, subject, and message. A unique option being proposed is the ability for users to submit their messages via Skype. If this option is ...

javahtmlformsskype

Tips for utilizing vulnerable web scripts on SSL-enabled pages

After implementing SSL to secure my pages, I encountered an issue where one of my scripts no longer functions properly. Specifically, I had a script on my page that was used to display the visit count from this website. Previously, it was functioning fla ...

phpjavascripthtmlweb-applicationsssl

Looking to create a format for displaying short comic strips in a grid pattern

I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, b ...

javascripthtmlcss

How tall can an image be to load successfully on an iPad website?

Similar Query: Max image width in Mobile Safari? Dealing with unwanted downscaling on panoramas What is the maximum height an image can be loaded at on a website when viewed on an iPad? I've tried loading an image (a sprite) with a height exceeding ...

cssimageipad

Jump to a specific section on a different page when the links are already equipped with anchors for smooth scrolling

My website has a menu on the home page that scrolls to specific id positions: <li><a href="#event-section">El evento</a></li> <li><a href="#asistentes-section">Asistentes</a></li> <li><a href="#cont ...

javascriptjqueryhtml

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Having trouble determining the URL of a using .closest, .find and potentially other jQuery methods. The webpage structure is as follows: ul ul ul.good li ... li li <a href="/findme">findme</a> ul . ...

jqueryhtmlcssfindparent-child

Should comments come before <!DOCTYPE HTML>?

When organizing my files, I always start with a comment about the content. However, I've been told that it's not recommended to put anything before the declaration. Is it acceptable to include comments before this or should I reserve the top of m ...

htmlcomments