Empower your presentations with slick cloning technology

I am facing an issue with my slider that I cannot seem to resolve.

Currently, I am using slick to display 3 slides, but only the center one shows all the content. To achieve a continuous infinite slider effect where all slides appear in the center, I need to clone the slides when there are only 3 present.

$('.center').slick({
    centerMode: true,
    centerPadding: '0px',
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,
    focusOnSelect: true,
    adaptiveHeight: true
});

Here is an example with enough slides: https://jsfiddle.net/f580ys4b/1/

And here is an example with only 3 slides: https://jsfiddle.net/f580ys4b/2/

javascriptjquerycsssliderslick.js

Answer №1

Before starting the Slick carousel, it's important to ensure that the number of slide items is greater than the number of slidesToShow. If this condition is not met, you can easily duplicate the children elements until there are enough slide items to show. This task can be accomplished using jQuery.

var slideCount = jQuery(".slide").length;
if (slideCount <= 3) {
  // Clone elements
  jQuery(".center.slider").children().clone(true, true).appendTo(".center.slider");
}

jQuery('.center').slick({
  arrows: false,
  centerMode: true,
  centerPadding: '0px',
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: false,
  focusOnSelect: true,
  adaptiveHeight: true
});

Answer №2

Here is a customized approach inspired by Rohan's solution:

In my scenario, I encountered an issue with the slider and filters. The problem arose when the filtered elements matched the elements meant to be displayed, causing the infinite loop not to function correctly. To address this, I implemented a solution where upon resetting the slider during filtering, I compare the filtered elements with the intended display elements. If they are identical, I duplicate the elements.

$('.slider-productos').on('reInit', function(event, slick, currentSlide, nextSlide) {
    if (slick.slideCount === slick.options.slidesToShow) {

        var toClone1 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(1)');
        var toClone2 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
        var toClone3 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(3)');

        toClone1.clone().appendTo(".slider-productos .slick-track");
        toClone2.clone().appendTo(".slider-productos .slick-track");
        toClone3.clone().appendTo(".slider-productos .slick-track");

        $('.slider-productos').slick('slickSetOption', 'infinite', true, 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

Issue with Bootstrap carousel: image protrudes past boundaries of parent container

Struggling with setting up a bootstrap carousel on my page. I want the image to extend beyond the parent div, positioned at the bottom rather than the top. How can I achieve this without disrupting the default carousel behavior? Here's a sketch of how ...

javascripthtmlcsstwitter-bootstrapcarousel

Exclusively Bootstrap-Timepicker

Is there a way to create a textbox with a time picker only? I am looking for guidance on how to do this using the following example: http://jsfiddle.net/RR4hw/11/ jQuery("#startDate").on("dp.change",function (e) { jQuery('#endDate').data("DateTi ...

htmltwitter-bootstrapcssdatepickertimepicker

How to access a specific element within an ng-grid

My grid options include: $scope.ngOptions = { data: 'data', columnDefs: [ {field: 'Status', displayName: "Status", cellTemplate: selectTableTemplate, enableCellEdit: true}, {cellTemplate: &apos ...

javascriptjqueryangularjsng-gridangularjs-ng-change

Challenges with aligning Fontawesome stacks

I utilized the code example from Fontawesome's website to create a pair of stacked social media buttons and enclosed it in a div element to float them to the right side of the page. <div class="social-icons"> <span class="fa-stack fa-lg"> ...

csswordpress-themingfont-awesome

Ensuring accuracy within a personalized directive that is implemented numerous times within a single webpage (AngularJS)

Recently, I designed a unique directive that includes various inputs and dropdowns. To ensure proper binding between the outer and inner scopes for two-way data binding, I implemented an isolate scope. This setup allows me to reuse the directive multiple t ...

javascriptangularjsangularjs-directive

The output is visible in the Firefox console but does not display on the actual browser

Can anyone help me with a bug in my javascript/jQuery/PHP/mySQL application? When I submit a form, the response is visible in the Firebug console window but not in the browser window. I know this is a vague question, but I'm hoping it might be a commo ...

javascripthtmlconsoleresponse

Style sheets for two dynamically-sized boxes side by side

There are two boxes or columns positioned on the same line. Both have varying widths that need to remain on the same row. To clarify: .----------container 570px-----------. |[box1] [box2]| Ideal scenario | ...

htmlcss

Unveiling the magic: Dynamically displaying or concealing fields in Angular Reactive forms based on conditions

In my current scenario, there are three types of users: 1. Admin with 3 fields: email, firstname, lastname. 2. Employee with 4 fields: email, firstname, lastname, contact. 3. Front Office with 5 fields: email, firstname, lastname, airline details, vendo ...

javascriptangularangular-material

reinitializing an array duplicate within an angular function following the use of .splice()

My goal is to create a dropdown menu in Angular that automatically removes the current page from the list when navigating to another view. I want the menu to reset and remove the now-current view every time a new view is loaded. This is the array of objec ...

javascriptarraysangularjs

Maintain Bullet and Arrow Size with JSSOR Scaling Feature

I am currently utilizing the jssor image slider with jquery and overall, it is functioning well. However, I have encountered an issue when attempting to resize the slider. My goal is to dynamically resize the slider whenever the window width changes. The ...

javascriptjqueryjssor

Angular 5: There was an issue with the property not defined for lowercase conversion

I keep encountering this error whenever I attempt to filter a column of a table. The data is retrieved from a FireStore cloud collection and the 'auteur' field is defined in each document. Here is how my component looks: import { Component, OnI ...

javascriptangularangular5

JavaScript: Employ array destructuring for improved code readability (eslintprefer-destructuring)

How can I resolve the ESLint error that says "Use array destructuring. eslint(prefer-destructuring)"? The error occurs on this line of my code: let foo = 1; foo = obj.data[i][1]; //ESLint error on this line If anyone could provide assistance in fixing thi ...

javascripttypescriptdestructuring

Modify the HTML based on the width of $(window)

I have a header bar with three columns. When the window width is less than 767px, I need to change the content of these columns. HTML: <div class="header"> <div class="col-xs-4" id="tab1">Original Text</div> <div class="col-x ...

jqueryhtmlresizewindowwidth

using an external JavaScript function in the MongoDB shell

In my case, I have JavaScript functions that are stored in a JSON file: functions={} functions.a = function(){ return "returned" } I've come across tutorials suggesting that by importing this JSON file, I should be able to use these ...

javascriptpythonshellmongodb

Update specific fields in a MySQL database using Express.js only if they are passed as parameters

After spending several days trying to set up a REST API, I found a helpful tutorial that explained the basics of sending requests and receiving responses. The only issue is that the tutorial uses MongoDB and Mongoose, while I'm working with MySQL. Due ...

javascriptnode.jsexpress

Exploring promise chaining in mongoDB (and mongoose): A guide to effectively utilizing .save() following .then() and gracefully exiting a promise chain upon sending a response

Currently, I have implemented a code snippet for user signup that involves several steps. Initially, I validate the user input to ensure its correctness. Following this, I verify if the user already exists in the system, and if so, I return a response of 4 ...

javascriptnode.jsmongodbmongoosees6-promise

Error encountered when attempting to trigger a Bootstrap dropdown within a designated div

When using React JS, I encountered an issue when trying to trigger a dropdown that was nested inside a div with the class name "row". Initially, I placed the data-toggle and data-target attributes inside the div, like so: <div className="row"> < ...

javascripthtmlcssreactjsbootstrap-4

What is the best method to divide a string, enclose it within a span tag, and generate fresh code using jQuery?

Is there a way to separate multiple links, enclose them in a span tag, and then iterate through them to display them back within the a tag? I have managed to split all the dates into the dateArr array, but I need help looping through them to output each on ...

javascriptjquery

Trouble with updating a variable within a loop in Cypress

During my experience with writing Cypress tests, I came across an issue that is preventing me from updating a specific variable. The goal of my test is to run a loop and update the questionId variable within each iteration for making API queries. However, ...

javascripttypescriptiterationcypress

A handy guide on utilizing the chunk method to upload big files with vue.js and laravel

How to upload a file using the HTML5 File Reader, read the file, and then upload it in Laravel? ...

jqueryvue.jslaravel-5.3