Customized height for vertical Slick slider based on content length

I am facing an issue with my vertical slick slider:

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  infinite: false,
  centerMode: true,
  vertical: true,
  focusOnSelect: true
});
.slider {
  background: #eee;
  margin: 1rem;
}

.slick-vertical .slick-slide {
  cursor: pointer;
  padding: 1rem;
}

.slick-vertical .slick-slide:hover {
  background: #ddd;
}

.slick-vertical .slick-slide img {
  display: none;
  margin: 0 auto;
}

.slick-slide {
  border: 1px solid #ccc;
  text-align: center;
}

.slick-vertical .slick-slide.slick-current img {
  display: block;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

  
<div class="slider">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet , consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, alias.
    </p>
    
    <img src="https://dummyimage.com/300x150/ccc/fff&text=img-1" alt="">
  </div>
</div>

The problem I'm encountering is that the selected images are not appearing as expected when a cell is clicked on. The current functionality of the slider is not working properly.

If you have any suggestions or solutions on how to troubleshoot and fix this slider issue, please let me know.

jqueryhtmlcssslick.js

Answer №1

Determine the tallest slide and apply top/bottom margins to other elements.

let maxHeight = -1;
$('.slick-slide').each(function() {
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});
$('.slick-slide').each(function() {
  if ($(this).height() < maxHeight) {
    $(this).css('margin', Math.ceil((maxHeight-$(this).height())/2) + 'px 0');
  }
});

Answer №2

$('.custom-carousel').on('slideChange', function(event, carousel, currentSlide, nextSlide){

       // selecting the next slide as an object
        var NextSlide=$(carousel.$slides.get(nextSlide));
        
       // adding a smooth transition for min-height change
        $(".custom-carousel .slick-list").css("transition","min-height 1s ease");

       // adjusting the min-height based on the height of the next slide
        $(".custom-carousel .slick-list").css("min-height",NextSlide.height());

    });

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

Obtain the numerical value of the vertical position of the mouse (

Currently, I am coding a JavaScript game and my objective is to designate a variable specifically for the Y axis of the mouse. I kindly request that the code be kept as simple and straightforward as possible, avoiding unnecessary complexity. That conclud ...

javascripthtmlvariablesyaxis

Developing a jQuery loop

I am in the process of creating a function that will change the background color (color A), box color (color B), and text color (color A) when a user clicks on the refresh button. I have already defined an array called 'colors', but I am struggli ...

javascriptjqueryarraysloops

Execute a webpage in the background using PHP

Currently, I'm working on creating a basic PHP script to fetch four images from a server. The catch is that each time I retrieve a new image, I have to access a webpage first - like this: http://example.com/Set.cgi?Image=1 I don't have the abili ...

phpcgihtml

TabContainer - streamline your selection process with inline tabs

I am currently working on a GUI that includes a TabContainer with two tabs, each containing a different datagrid. I initially created the tabcontainer divs and datagrids declaratively in HTML for simplicity, but I am open to changing this approach if it wo ...

javascripthtmlcssdojo

Clicking on the title link will open the content in an iframe, but the image

Having trouble with a previous post but I've created a codepen to illustrate the issue. Hoping someone can help me out! Check out the codepen here: "https://codepen.io/Lossmann/pen/GRrXyQY" ...

javascripthtmlcss

The methodology of executing a Javascript function

I have the following code snippet: (function() { $(document).ready(function() { //Event handlers $('.project-delete').on('click', function() { deleteProject($(this)); }); $('.keyword-delete').on(&ap ...

javascriptjquery

JavaScript (geolocation) error: Unhandled TypeError - Invocation not allowed

Encountering the Javascript error "Uncaught TypeError: Illegal invocation" while executing the code var nativeGeoloation = window.navigator.geolocation.getCurrentPosition; nativeGeoloation(function (){ alert("ok")}); Despite attempting to call the code w ...

javascripthtmlcordovageolocation

Using Jquery to create a sub panel for mmenu with a div instead of ul

I'm currently utilizing the fantastic Jquery mmenu plugin to design sliding menus. While my regular menu with ul and li tags, along with submenus, is functioning properly, I am trying to implement a submenu that resembles a sub panel with general cont ...

jquerymmenu

Exploring the wonders of AJAX in ASP.NET MVC 1.0 on the seamless IIS 6 platform

While working with AJAX and jQuery in ASP.NET MVC on IIS 6.0, I encountered an issue where invoking an action via jQuery resulted in a 403.1 error. Is there something specific that needs to be added to the web.config file to address this problem? Client-S ...

asp.net-mvciis-6jquery

How can I prevent the same JavaScript from loading twice in PHP, JavaScript, and HTML when using `<script>'?

Is there a PHP equivalent of require_once or include_once for JavaScript within the <script> tag? While I understand that <script> is part of HTML, I'm curious if such functionality exists in either PHP or HTML. I am looking to avoid load ...

javascripthtml

It appears that Internet Explorer is still animating/processing my loading.gif despite being set to display:none

It seems that the issue I'm encountering is related to the inconsistent starting position of the loading.gif animation when performing an ajax request. In Internet Explorer, the animation appears to start from a random point, while in Firefox it alway ...

htmlcss

Ways to trigger javascript following each ajax or complete request

I have a jQuery function that attaches a click event to specific elements, as shown below. $(".alert-message .close").click(function(e) { $(this).parent().fadeTo(200, 0, function() { $(this).slideUp(300); }); e.preventDefault(); }) ...

javascriptjqueryasp.nettwitter-bootstrap

Invisible anchor rows in GWT's UIBinder grid view

While developing my GWT application, I encountered an issue in a composite class where I am creating a Grid UI binder. Each cell of the grid contains an anchor UI Binder element. However, upon loading the page in the application, I noticed that the table w ...

javahtmlgwtgriduibinder

What is the best way to vertically align my content in the center?

Is there a way to vertically center all of the text content, especially focusing on the drop-down button and block, here? Despite my efforts to research and find solutions online, I have not been able to achieve the desired visual results. I am restricted ...

htmlcssdrop-down-menuvertical-alignment

Angular 2/Typescript experiencing a glitch with Jquery carousel functionality

After properly installing and importing jquery in my project, I encountered a specific issue. Within my application code, there is a line that reads as follows: $('#myCarousel').carousel("next"); Upon running npm start, an error is thrown: ...

jqueryangulartypescript

Jquery UI sortable can determine the vertical orientation, either moving items up or down

I am having difficulty determining the direction in which axis N is moving, whether up or down. I would also like the elements (h2 and p) inside to remain in their positions. Can anyone provide assistance? http://jsfiddle.net/zerolfc/y62awe4u/2/ <div ...

javascriptjqueryjquery-uiresizable

Securing your API key while utilizing jQuery.getJSON: Best practices

I have a problem that I am trying to find a solution for... The issue is that I need to retrieve a JSON response from a server using .getjson, but the server necessitates the usage of an apikey which I am cautious about keeping secure and confidential. T ...

jqueryjson

changing the action URL of a jQuery form dynamically upon submission

I am currently utilizing a jquery ajax form library and I would like to alter the action URL when submitting the form. Here is the HTML code: <div class="modal-body form"><?php echo form_open_multipart("#",array('id'=>'mng_form ...

phpjqueryajax

Transform C# ASPX to handlebars format

Initially, my task was to choose and relocate a single li from many options into a different div. But now, I am required to achieve the same result using a JS template which utilizes handlebars. The C# section is as follows: <li class="l-row__item pr ...

c#javascriptjqueryhandlebars.js

Using an ASP.NET control along with jQuery within a standalone .js file

I recently created a jQuery voting script that functions perfectly when the code is kept within the header of the page. However, I am interested in transferring it to a separate .js file and simply including this .js file at the top of the page. Strangely, ...

javascriptjqueryasp.net