What is the best way to set a specific height for a centered image in jQuery LightSlider?

I am faced with a light slider displaying images of varying heights. When I enable isAdaptiveHeight, it adjusts the height based on the image size automatically, but this doesn't meet my preferences.

What I desire is to set a fixed height for all images, and if an image is smaller than that fixed height, I want it centered within the designated space. You can view my attempt at achieving this in this fiddler link: http://jsfiddle.net/mbjvc5u8/1/.

The issue arises when the first image is small while the others are large; I do not wish for the UI to adjust. Instead, I aim for a fixed height for the lightslider with a centered image. Despite my efforts, I have been unsuccessful in achieving this desired outcome.

htmlcssimage

Answer №1

I have a solution that might work for you:

$('#lightSlider').lightSlider({
  gallery: true,
  item: 1,
  loop: true,
  slideMargin: 0,
  thumbItem: 9,
  onSliderLoad: function() {


    $("img").addClass("preferredHeight");



  }


});
.demo {
  width: 420px;
}

ul {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor: pointer;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.preferredHeight {
  max-height: 127px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>

<div class="demo">
  <ul id="lightSlider">
    <li data-thumb="http://sc.reel-scout.com/up_images/2/2650782.jpg?10/24/2019 5:31:11 AM">
      <img src="http://sc.reel-scout.com/up_images/2/2650782.jpg?10/24/2019 5:31:11 AM" />
    </li>
    <li data-thumb="http://sc.reel-scout.com/up_images/1/2650811.jpg?10/24/2019 5:31:11 AM">
      <img src="http://sc.reel-scout.com/up_images/1/2650811.jpg?10/24/2019 5:31:11 AM" />
    </li>
    <li data-thumb="http://sc.reel-scout.com/up_images/5/2650815.jpg?10/24/2019 5:31:11 AM">
      <img src="http://sc.reel-scout.com/up_images/5/2650815.jpg?10/24/2019 5:31:11 AM" />
    </li>

    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
    </li>
  </ul>
</div>

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

Differences Between Bootstrap Source Code and Bootstrap CDN Link

I am in the process of updating the user interface for my website, utilizing Bootstrap 5.3. Initially, I utilized the CDN link provided in the official documentation. Recently, I acquired Bootstrap Studio as a tool to streamline the UI development process. ...

htmlcssbootstrap-5

Issue with the div elements not aligning next to each other

I am facing an issue with my code in blade.php where I need to display images. The ideal layout would be to have the images stacked side by side within a div element, but unfortunately, it's not working as expected. I have tried using flex, bootstrap ...

htmlcss

What is the best way to utilize Selenium with Python for choosing an item from a dropdown menu when the choices are contained within non-interactable <div> elements?

I am currently working on a program that navigates through the well-known website using selenium automation. However, I have encountered an obstacle on the second page where there is a dropdown menu prompting users to select a top-level domain. The dropdo ...

pythonhtmlseleniumweb-scraping

Selector in CSS targeted by using target selector

When you click on the anchor tag "Click me," is there a way to use only CSS to display the p tag with the text "This is my answer"? I am aware that placing the p tag after the anchor tag is a solution, but I am curious if there is a method to achieve this ...

javascriptjqueryhtmlcss

Fundamental CSS Selector

I'm encountering an issue with CSS selectors while using Foundation 5: I am having trouble selecting the desired element, which seems strange to me. The specific problem I am facing is related to changing the background-color of the "Right Button Act ...

htmlcsscss-selectorszurb-foundation

Utilizing Pagination in Python Django to Handle URL Identifiers

I'm encountering a small issue with the following code: Html Code : a href="{% url 'entertainment:novelsView' novel.id %}">buttonclass="pull-right btn btn-primary btn-xs">Link span class="fa fa-link"</span></button</a vi ...

pythonhtmldjango

Error message in console log indicates issue with carousel's responsive settings

On my page, I have several jcarousels with the same responsive setting and all other settings identical. However, I encountered a console error for one of them while the others worked perfectly: Invalid slick slider responsive breakpoints setting value! ...

jqueryhtmlrazorcarouselslick.js

What is the best way to calculate the total sum of the first element in each index of an array when using ng

I am looking to calculate the sum of the first elements from all indexes of an array using ng-repeat in AngularJS. My goal is to declare a variable and increment its value with each iteration of ng-repeat, then display that variable at the end. Below is ...

javascripthtmlangularjsangularjs-ng-repeat

Is there a way to detect when the browser's back button is clicked?

As I work on supporting an e-commerce app that deals with creating and submitting orders, a user recently discovered a loophole wherein they could trigger an error condition by quickly pressing the back button after submitting their order. To address this ...

javascriptjqueryhtmlbrowser-history

When floating a left and right div block, they do not necessarily align on the same line

I am looking to create a nested menu where some of the menu items have key shortcuts that I want to align to the right side on the same line. I attempted to use float left/right, but encountered an issue where the shortcuts were shifted to the next line. H ...

htmlcss

Quickest method for identifying the pixels in consecutive images that remain consistent or show minimal change

I'm on a mission to identify the static pixels in a video stream so I can pinpoint logos and other stationary objects. Here's the concept behind my script: Compile a list named previous containing a number of frames that are the same size and i ...

pythonimagenumpyopencvcomputer-vision

Utilizing Bootstrap for Content Width as Opposed to Full Screen Width

I am currently utilizing Bootstrap 4, but I prefer not to rely on the screen width for my layout. Instead, I want it to adapt based on the width of a specific container. Despite my efforts in searching for a solution, I have been unable to find the necess ...

htmlcssbootstrap-4

Utilizing Bootstrap Classes in ReactJS: A Comprehensive Guide

Is it possible to incorporate Bootstrap classes in a React application without actually installing the framework? If so, how can this be achieved and utilized effectively? I would greatly appreciate your assistance with this matter. ...

cssreactjstwitter-bootstrapnpm

jQuery allows you to assign the identical function to multiple actions

I am faced with a situation where I have multiple actions that need to perform the same function. <ul> <li> <select id="s1"> <option>Name</option> <option>Year</option> ...

jqueryhtml

The CSS files undergo modifications when executing the command "npm run dev"

I've been working on an open-source project where I encountered a bug. Even when there are no images to display, the "Load More" button in the web browser extension still appears. To fix this, I decided to add the class `removeButton` to the button an ...

javascripthtmlcssnode.jsnpm

"Obtaining Google locations within a modal box - a step-by-step

Having trouble with my Google Places search integration in Angular 2. <input type="text" type="text" class="form-control" placeholder="Address" [ngClass]="{active:signupSubmitted && !signUpForm.controls['formatted_address'].valid}" [ ...

htmlcssangularangular2-templatebootstrap-4

Show input field depending on chosen option

I'm looking to create a dynamic form where specific input fields are displayed based on the selection made in another field. For example, if "gender: male" is selected, the input field for "blue" should appear, and if "gender: female" is selected, the ...

javascriptjqueryhtmlajax

Exploring Vue.js: Leveraging v-bind for multiple classes in Vue.js applications

Can someone assist me in figuring out how to apply multiple options to v-bind:class? In my Uno game, I need to determine the text color of cards based on their color property stored as a list of objects like this: ([{ Color: green, Value: 6}]. Here is my ...

javascripthtmlvue.jsvuejs2vue-component

The ReactJS Application Cache Client fails to display the most recent updates

One issue I'm currently facing is with my application in production. Some clients have reported that they are unable to see the new changes unless they clear their cache completely. Using Techs: React Any suggestions on what steps I should take to a ...

javascripthtmlreactjscachingbrowser-cache

"Is there a way to target an element within another element that has inline styles using

What is the best CSS strategy for targeting elements with inline styles? How can I focus on the first span but exclude the second using only CSS? If that's not achievable, is it possible to accomplish this using jQuery? http://jsfiddle.net/TYCNE/ & ...

htmlcsscss-selectorsinline-styles