The variablewidth feature in Slick Carousel is malfunctioning

I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here:

https://i.sstatic.net/5QFRx.jpg

However, what's happening in my case is this: https://i.sstatic.net/DNdr3.jpg

Why is the slider stretching to fill 100% of the div? Am I missing something or is this a known issue?

Below is the code snippet:

<div class="services_slider">
   <div class="service" style="width: 150px">
      <span class="service_title">Financiamento</span>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu efficitur arcu, sit amet vestibulum libero. Vivamus ac ligula eros. Pellentesque fermentum diam ac mi elementum sollicitudin....quip commodo dignissim congue, est nisl auctor eros, id auctor odio neque vel risus."</p>
   </div>
   <div class="service" style="width: 250px">
       <span class="service_title">Oficina</span>
       <p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. ...racies feugiat."</p>
   </div>
    ...
</div>

$(document).ready(function() {
  $('.services_slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
});

Your assistance on resolving this issue would be greatly appreciated. Thank you in advance!

jqueryhtmlcssslick.js

Answer №1

Despite specifying slideToShow: 1, it seems like the real issue lies in the inline width declarations for the .service divs.

To address this, consider refraining from directly applying styles to these divs and instead wrapping the slide contents with a designated div controlling the width.

Refactoring the code as below:

    <div class="service" style="width: 250px">
        <span class="service_title">Teste 3</span>
        <p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
   </div>

Would result in the improved structure shown below:

   <div class="service">
     <div style="width: 250px">
        <span class="service_title">Teste 3</span>
        <p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
    </div>
   </div>


$(document).ready(function() {
  $('.services_slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />


<div class="services_slider">
  <div class="service">

...

      <span class="service_title">Venda de veículos</span>
      <p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
        libero a scelerisque feugiat."</p>
    </div>
  </div>

...

       
  </div>

...

       

</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

What is the best way to access the front camera on both Android and iOS devices in order to capture a photo using Vue.J

I am currently developing a PWA Vue.Js application and I am trying to implement a feature that allows users to take a picture with the front camera on their mobile devices. Although I have managed to write code that works on my desktop browser, I have bee ...

javascripthtmlcssvue.js

Update every image's src attribute from jpg to png with the help of jQuery

The dom contains img elements with different src attributes: <img src="http://example.com/cat.jpg" <img src="http://example.com/dog.jpg" <img src="http://example.com/rat.jpg" I need to change all the src values to png format. Here's how it ...

jquery

Can CSS modules be used in conjunction with outside libraries?

I've incorporated a Slider library () into my React project. While regular CSS allows me to style the slider properly, I am facing issues when using css modules. The tsx file looks like this: import styles from './styles.module.css'; . . . ...

cssreactjscss-modules

Utilize jQuery ajax to target a particular recurring input

I am using HTML code along with another jQuery loop. Within this loop, there is an input element that is also being looped. I am trying to manipulate it using jQuery Ajax... but I am facing an issue where only the first input element works properly. The re ...

javascriptjqueryajax

Ways to customize CSS styles for a single page?

<head> <link href="index.css" rel="stylesheet"> <style> #amor_di_mundo{ color:#ffffff; } </style> </head> <body> <div id='divL'> <div id='amor_di_mundo'>Amor di Mundo</div> <di ...

htmlcss

Using jQuery's sortable functionality to rearrange rows in a table can cause conflicts with Angular's orderBy feature

In the past, my angular app used a table with orderBy to sort rows based on a specific column. By clicking on a table header, the orderBy arguments would change and the list would be sorted according to the values in that column. Now, I am experimenting w ...

javascriptjqueryhtmlangularjsjquery-ui

When utilizing jQuery events, ensure to pass along parameters when context is changed

I am working with the following simple code: app.Modules.myModule = { init: function(){ this.bindEvents(); }, bindEvents: function(){ app.Events.on('user:added', this.userAdded.call(this)); this.username = $( ...

jquery

Interactive feature allowing all embedded YouTube videos on a webpage to play synchronously, with sound disabled, and on a continuous loop

I am in the process of developing a button that, when clicked by a user, will trigger all embedded YouTube videos on a specific webpage to start playing simultaneously, with sound muted, and set to loop. The target page for this button implementation can ...

javascripthtmljquerycss

Presentation with multi-directional animations

Curious to know if it's possible to create a unique slideshow that scrolls in multiple directions? The concept is to display various projects when scrolling up and down, and different images within each project when scrolling left and right. Is this i ...

javascripthtmlcsssliderslideshow

PHP updating data in a MySQL database

I've been using easyPHP and encountering issues with updating records in my database. Whenever I try to update, the HTML form displays <?php echo $btitle; ?> and <?php echo $bauthor; ?> instead of updating the data. However, it does print ...

phphtmlmysqldatabase

Sharing resources between different origins and the file:// protocol

I have been developing an HTML5 application that is collecting data from various sources using JSONP. So far, everything involving a GET request has been functioning perfectly. However, I have encountered a hurdle while attempting to make a POST request. T ...

javascriptajaxjsonhtmljsonp

The inner DIV cannot be accessed using document.getElementById due to its limited scope

Here is the HTML code below: <Div id="one"> <Div id="two"> </Div> </Div> When trying to access div "two" using "document.getElementById("two")", it returns null. ...

htmlaccessibility

The Issue with jQuery Masked Input Functionality

Currently, I am utilizing the jQuery masked input plugin version 1.2.2 created by DigitalBush. Upon applying masks like: $(".phone").mask("(999)-999-9999"); $(".zip").mask("99999?-9999"); to input boxes, I have noticed some peculiar behavior. Essential ...

jqueryhtmljquery-pluginsmaskedtextbox

Having trouble with implementing a lightbox form data onto an HTML page using the load() function? Let me help

In my project, I have set up a lightbox containing a form where user inputs are used to populate an HTML file loaded and appended to the main HTML page with the load() function. While I can successfully load the data onto the page, I am facing challenges i ...

jqueryhtmlcssajax

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Here is my specific requirement: I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for ...

javascriptjqueryhtmlcss

Is there a way to customize the CSS ul menu specifically for the JavaScript autocomplete feature?

I have created a search page with autocomplete for the first textbox, but I noticed that the ul/li CSS classes used for styling the main menu are impacting the JavaScript list. How can I override the menu styling to display a regular list format? Being a ...

javascripthtmlcss

Transition from Material UI styles to SCSS equivalent

Can you assist me in converting the following Material UI themes to its equivalent SCSS? I am defining up("sm") as meaning above600px. I'm in the process of creating a @mixin contentShiftContainer so that I can use it wherever needed. Howev ...

cssreactjssassmaterial-uitransition

Attempting to rearrange the table data by selecting the column header

In an attempt to create a table that can be sorted by clicking on the column headers, I have written code using Javascript, HTML, and PHP. Below is the code snippet: <?php $rows=array(); $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As ...

javascriptphpcssmysqlhtml-table

Unlocking JSON object with AngularJS

I have saved JSON data in a separate file named Countries.Json located in a folder called ListofCountries within the View directory. Now, I am trying to display this data on button click using AngularJS. However, I am facing difficulties in passing the J ...

htmlangularjs

Navigate across list items using the tab key in Angular 7

Below is the sidenav menu snippet containing various items: <ul class="account-settings-container" *ngIf="isUserActive"> <li> <app-account-information></app-account-information> </li> <li> <app-theme-p ...

htmlangular