CODEWITHSUNDEEP
jquerycarousel
Shadow
Shadow

Reputation: 58

How loop cards when get to last carousel item

So, i have a hardcoded carousel 'cause it has its owns styles and its similar to netflix carousel but when i get to the last item by moving it with the left and right indicators it just broke cause there are no more items, i want to know if there is something that i can do in order to when get to the last item start again from the first, in the image is an example of what happens and if i click one more time to the right no more items. as i've asked before, is there a way to loop the items? I'm using rails and jquery enter image description here

Carousel here

<div id="section-events">
<span id="controlL" class="left-controls" role="button" aria-label="See Previous Modules">
    <b class="fa fa-chevron-left fa-chevron-left-extra" aria-hidden="true"></b>
</span>
<div class="module-section clearfix">
    <!-- <button class="btn arrow-guides fa-chevron-left"></button> -->
    <ul id="content">
        <% @shows.each do |show| %>
        <%= render partial: "event", locals: {show: show} %>
        <% end %>
    </ul>
</div>
<!--end of module-section-->
<span id="controlR" class="right-controls" role="button" aria-label="See Previous Modules">
    <b class="fa fa-chevron-right fa-chevron-right-extra" aria-hidden="true"></b>
</span>
<!-- <button class="btn arrow-guides-right fa-chevron-right"></button> -->
<div class="view-more-button">
    <%= link_to "Show more" ,events_landing_path, class: "btn btn-outline-info" %>
</div>

Jquery here

$('#controlR').click(function() {
event.preventDefault();
$('#content').animate({
    marginLeft: "-=95vw"
}, "fast");

});

$('#controlL').click(function() {
event.preventDefault();
$('#content').animate({
    marginLeft: "+=95vw"
}, "fast");

});

Upvotes: 0

Views: 511

Answers (1)

EmmanuelB
EmmanuelB

Reputation: 1427

I think your question is not necessarily for ruby-on-rails. Following this tutorial on slick the answer to your question may be:

In short, write in your <head> tag:

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Then the scripts:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

And in your javascript:

$(".module.section").slick({
  infinite: true,
  slidesToShow: 4, // or whatever you want
  slidesToScroll: 1 // or whatever you want
});

You can delegate some of your HTML to it, and it would end up with something like:

<div if="section-events">
  <div class="module-section clearfix">
      <% @shows.each do |show| %>
        <div><%= render partial: "event", locals: {show: show} %></div>
      <% end %>
    </ul>
  </div>
</div>

Give it a try, the tutorial is quite easy to follow.

Upvotes: 1

Related Questions