The Lightslider’s responsive height is being clipped

I attempted to utilize the Lightslider plugin in order to craft a responsive slider for showcasing my portfolio images.

However, I encountered an issue where the height of each thumbnail in the portfolio appears to be cropped from both the top and bottom edges.

Below is my code snippet:

$('#responsive').lightSlider({
            item: 4,
            loop: false,
            slideMove: 2,
            easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
            speed: 600,
            pager: false,
            slideMargin: 20,
            responsive: [
                {
                    breakpoint: 800,
                    settings: {
                        item: 3,
                        slideMove: 1,
                        slideMargin: 6,
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        item: 2,
                        slideMove: 1,
                    }
                }
            ]
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<div class="item"> 
   <ul id="responsive" class="content-slider">
     <?php for($i=1; $i<7; $i++){ ?>
     <li>
       <img src="https://assets.materialup.com/uploads/82eae29e-33b7-4ff7-be10-df432402b2b6/preview"  style="width: 40%"/>
     </li>
     <?php } ?>
   </ul>
</div>

This is the current output I am getting: https://i.sstatic.net/COVYI.jpg

javascripthtmlcss

Answer №1

Make sure to include the following code in your lightslider for optimizing display:

onSliderLoad: function (element) {
  var maxHeight = 0,
    container = $(element),
    children = container.children();
  children.each(function () {
    var childHeight = $(this).height();
    if (childHeight > maxHeight) {
      maxHeight = childHeight;
    }
  });
  container.height(maxHeight);
}

Answer №2

 $("#customSlider").customSliderFunction({
    onSliderLoad: function (el) {
      var largestHeight = 0,
        container = $(el),
        children = container.children();
      children.each(function () {
        var childHeight = $(this).height();
        if (childHeight > largestHeight) {
          largestHeight = childHeight;
        }
      });
      container.height(largestHeight);
    },
    item:4,
    loop:true,
    slideMove:1,
    auto:true,
    pauseOnHover:true,
    easing: "cubic-bezier(0.25, 0, 0.25, 1)",
    speed:600,
    responsive : [
      {
        breakpoint:992,
        settings: {
          item:3,
          slideMove:1
        }
      },
      {
        breakpoint:768,
        settings: {
          item:2,
          slideMove:1
        }
      },
      {
        breakpoint:576,
        settings: {
          item:1,
          slideMove:1
        }
      }
    ]
  });

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

Choose various columns and transfer them to jade

I am currently developing a web application using Node.js, where I am fetching data from my MySQL database using the following function: function getRobots(robotname, ownerid, callback) { connection.query('SELECT * FROM robots WHERE robot_owner_i ...

javascriptnode.jsexpresspug

The 'import' statement is not functioning properly within a script in the rendered HTML

While working on an express application, I've encountered a recurring error that I can't seem to solve. The error message is: "GET http://localhost:3000/javascript/module2 net::ERR_ABORTED 404 (Not Found)" Could someone kindly assist me in ident ...

javascriptnode.jsexpressecmascript-6es6-modules

Influence of scoped styles on external webpages

I'm facing an issue with my nuxt app where I have two pages, each with different background styles. However, the background of one page is overriding the other. index.vue <style scoped> body { background-color: #ffffff; } #banner { backgr ...

cssvue.jsnuxt.js

Ways to extract information from a URL when utilizing JQuery code

Code snippet: $(document).ready(function(){ $(".uni_type").click(function(){ uni_type = this.id; location.href = "filter-colleges.php?uni_type="+uni_type; }); }); HTML code: <ul> <li class="uni_type" id="central univ ...

javascriptphpjqueryhtmlcss

Hover over to reveal sliding menu

Hey everyone! Take a look at this code snippet: <body> <div id="slidemenubar"> <a href="">1</a> </div><br> <div id="slidemenubar2"> <a href="">2</a> </div> </body> When hovering over the ...

javascriptjqueryhtmlcss

Why does console.log in JavaScript exhibit different behaviors as evidenced by the code?

Exploring the behavior of console.log(obj) compared to console.log("obj"+"\n"+obj) in the code snippet below reveals two distinct output outcomes. const obj = new Object() obj.first = 'John' obj.last = 'Doe' obj.alive = true ob ...

javascriptnode.jsecmascript-6

Is it possible to invoke this JavaScript function like this?

Is there a way to call a function like item_edit.say hello by passing it as a string on the window object (similar to the last line in the snippet below)? var arc={ view: { item_edit: {} } }; arc.view.item_edit={ say_hello: function(){ alert(' ...

javascript

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

javascripthtmlcss

Verifying the invocation of a callback function through the use of $rootScope.$broadcast and $scope.$on

I have been testing to see if a callback was called in my controller. Controller (function () { 'use strict'; angular .module('GeoDashboard') .controller('CiudadCtrl', CiudadCtrl); CiudadCtrl.$i ...

javascriptangularjsunit-testingjasminesinon

Cannot modify CSS Position once it has been appended

I have a dilemma where I am appending code from one document to another. After the code is appended, I attempt to set the position of the newly added item using jQuery drag and drop functionality. The positions are stored in an array and then saved in a co ...

jquerycsscookiespositionappend

Can a never-ending CSS grid be used to design a unique gallery layout?

Hello fellow developers, I am looking to build a portfolio website with a gallery layout similar to Instagram, featuring 3 pictures in a row. I attempted to use CSS grid for this purpose. Here is how the grid currently looks: (Note that the 225px column/r ...

htmlcssgridresponsivecss-grid

Tips for updating Nodejs' module dependency to a newer version

Currently, my project utilizes the react-cropper library which includes version cropper ^0.10.0. However, I require certain methods from cropper version 0.11.1. To address this issue, I decided to fork the project to my own GitHub repository in order to up ...

javascriptnode.jsnpmnode-modules

Using HTML5 History API to navigate backwards without allowing the user to move forward (can popState?)

My webpage showcases user information with the help of AJAX for seamless data modification without altering the page layout. The process is straightforward: - Users can view their data when they access their profile. - By clicking the Edit button, a form ...

ajaxhtmlbackforwardhtml5-history

FormControlLabel in Mat ui is not correctly utilizing the state

I've been using FormControlLabel for my custom checkboxes, but I'm encountering an issue where they don't reflect the state that is being passed to them. Despite the onchange handler updating everything in redux/BE correctly, upon initial re ...

javascriptreactjsecmascript-6material-ui

Exploring the world of AngularJS and Packery

After stumbling upon this particular question, I was thrilled to find the perfect answer that suits my needs. Now I am seeking guidance on how to implement the solution provided in this question. Is there a way to make the necessary changes for utilizing n ...

javascriptangularjspackery

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

htmlangulartypescript

Extracting web search result URLs using Puppeteer

I'm currently facing an issue with the code I've written for web scraping Google. Despite passing in a specific request, it is not returning the list of links as expected. I am unsure about what might be causing this problem. Could someone kindly ...

javascriptnode.jspuppeteer

Simulated alternate identities for UI Router

I am managing a group of pages/URLs that share a common parent state/template: /orders/list /orders/create /products/list /products/create Currently, I have two dummy states/routes (/products and /orders) that serve as parent states for the other substat ...

javascriptangularjsangular-ui-router

Having trouble bypassing custom points on the reactive gauge speedometer

My current project involves utilizing the npm package react-d3-speedometer to create a custom points-based gauge. The issue I am facing is that while the package works properly with values from 0 to 1000 when passed to the customSegmentValues property, it ...

javascriptreactjsgauge

navigating a pointer graphic within a container

I've been working on creating a sniper game, but I've run into an issue with moving the sniper image inside the div. My main objective is to change the image to the sniper image when the mouse hovers over the div. Here's what I have tried so ...

javascriptjquery