Which Carousel would you reccomend to use

1

Gi guys, I am pretty new to Rails and i am not pretty sure which gem would be the best and the most convenient to use for. I need to implement the previous and next control button. So far i have found owl carousel and carousel provided by bootstrap.

Thank you in advance for any suggestions

2

Carousels are done with javascript and do not require a ruby gem. If all you need is the next/previous button, I’d recommend avoiding any of the external libs, as they are doing to add from 10kb to 30kb of JS to your project just for that, and coding it yourself . If you are using Stimulus, which is Rails “official” frontend “framework”, the guidebook demonstrates how to implement the previous and next button control, with a handful of lines of code.

1 Like
3

HI Breno, thank you very much for quick and brief replay.

I’ve been trying for a while to implement Bootstrap carousel

But the code below , just refreshes the page i am currently on so i don’t see any difference. Ps. Just for a testing reason i hardcoded two pictures.

<%= link_to image_tag(@items.images[0].url,class: "d-block w-40 h-40 img-fluid" ),@items.images[0].url%> 
  <div class="carousel-item ">
    <%= link_to image_tag(@items.images[1].url,class: "d-block w-40 h-40 img-fluid"),@items.images[1].url%>

  </div>



</div>

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>    </a>

<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>    </a>
4

That’s because you used an anchor tag (a) for your previous/next button. Try to replace it with button and remove the href.

<button type="button" class="carousel-control-prev" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span> 
</button>
5
<%= link_to image_tag(@items.images[0].url,class: "d-block w-40 h-40 img-fluid" ),@items.images[0].url%> 
  <div class="carousel-item ">
    <%= link_to image_tag(@items.images[1].url,class: "d-block w-40 h-40 img-fluid"),@items.images[1].url%>

  </div>



</div>
<button type="button" class="carousel-control-prev" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</button>

<button type="button" class="carousel-control-next" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">next</span>
</button>

Now it doesn’t react at all hmm… wondering why? any ideas?

. . . WTB i was trying to follow instruction provided right here => Carousel · Bootstrap . . . At the end i would like to get this carousel working like the one below Ogłoszenia - Sprzedam, kupię na OLX.pl update. I made it using JS, just wondering if there is a pure ROR way to do it ;D?

6

A carousel is a client side interaction element. There is no Rails Way for this. You make it with javascript and html, not with Ruby.

Personally, I found there was diminishing returns by rolling my own, so I use SwiperJS, even though it’s bloated with a lot of features I will never use (thankfully you can import only the features you need, which helps). I initialize it with a Stimulus controller.

There’s also a simplified setup for Swiper if you’re using Stimulus: Stimulus Carousel | Stimulus Components (I don’t use this simplified setup myself because I had some specific needs)

Note: You still need to write relevant markup that Swiper can use. Check their docs.