Why is slick adding slick-cloned slides to my slider?

Hi,

I have setup a slider with the correct js and markup as below:

<div class="books-slider">
        <% @books.shuffle.each do |book| %>
            <div class="slide <%= book.age %> <%= book.story_types.map(&:inspect).join(' ').gsub('"','').downcase %>" data-type="<%= book.story_types.map(&:inspect).join(', ').gsub('"','').downcase %>" data-title="<%= book.title %>" data-age="<%= book.age %>" data-author="<%= book.author.name %>">
              <%= link_to(book) do %>
                <div class="in">
                  <div class="book-jacket">
                    <%= image_tag book.jacket_cover.url %>
                  </div>
                </div>
              <% end %>
              <% if user_signed_in? %><%= link_to 'Destroy', book, method: :delete, style:'top: 0px;position: absolute;', data: { confirm: 'Are you sure?' } %><% end %>
              </div>
        <% end %>
      </div>

The above code basically runs through a loop and generates the slides from the loop and adds to them. Then I have the js that initiates the slider and gets data and inputs certain html in the slider:

$('.books-slider').slick({
                centerMode: true,
                centerPadding: '20px',
                slidesToShow: 1,
                adaptiveHeight: true,
                variableWidth: true,
                prevArrow: '.arrow-left',
                nextArrow: '.arrow-right',
                onInit: function(slide,index) {
                    var cr = $(slide.$slides.get(index));
                    var initTitle = cr.data('title'), 
                    initAuthor = cr.data('author'), 
                    initAge = cr.data('age'),
                    initType = cr.data('type');
                    $('.title-highlight h2.title').html(initTitle);
                    $('.title-highlight h2.author').html(initAuthor);
                    $('.title-highlight h2.age').html('Age: ' + initAge);
                    $('.title-highlight h2.type').html(initType);
                },
                onAfterChange: function(slide,index) {
                    var cr = $(slide.$slides.get(index));
                    var initTitle = cr.data('title'), 
                    initAuthor = cr.data('author'), 
                    initAge = cr.data('age'),
                    initType = cr.data('type');
                    $('.title-highlight h2.title').html(initTitle);
                    $('.title-highlight h2.author').html(initAuthor);
                    $('.title-highlight h2.age').html('Age: ' + initAge);
                    $('.title-highlight h2.type').html(initType);
                },
                responsive: [
                {
                  breakpoint: 768,
                  settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                  }
                }
                ]
            });

When I load the page I see that the slides have been cloned. There are only meant to be 2 at this current moment.

Here is what I see in the inspector:

Can anyone please help me here?

Thanks

[linorabolini]

But what if I want the infinite slideshow but without html clones ?

[simeydotme]

@mdunbavan thanks for contributing 😊

The cloned items are because you have an infinite carousel with 3 slides to show and in center mode. What this means is that Slick needs to place “clones” of those slides at each end of the carousel so that when you approach the end it has a copy to display at the beginning as it “infinitely” goes around.

---

Curiously; what exactly is your problem, and what is the bug with the plugin which you are creating an issue for? 😄 – if none please kindly close the issue.

Regards, Simon.