Rails: Как использовать ползунок JavaScript для отображения объектов ActiveRecord?

Question

Rails: Как использовать ползунок JavaScript для отображения объектов ActiveRecord?

0

На моей домашней странице я хочу отобразить 30 случайных пользователей. Но я хочу показать их с помощью слайдера. Таким образом, за один раз отображается только один пользователь, а ползунок - для следующего пользователя. В контроллере моей домашней страницы у меня есть:

@random_users = User.random(30)

Я хочу отобразить фотографию пользователя и другую информацию из его профиля в div с

height:400px;
width:200px;

Я просто не знаю, как реализовать функциональность ползунка для активных объектов записи. Есть ли драгоценный камень или плагин, который я могу использовать для этого?

pratski 06 окт. 2013, в 06:48

Источник

Теги:

javascript

jquery

ruby-on-rails

ruby-on-rails-3

2 ответа

0

Для этого нет драгоценного камня, но если вы используете jquery, тогда есть jQuery-плагины, такие как jCarousel и Cycle, которые вы можете использовать.

techvineet 06 окт. 2013, в 02:27

0

Да, я нашел несколько плагинов, таких как rabinglabs.com/slider-rails . Они все для изображений. Я просто не уверен, как можно перебирать @random_users и отображать их вместо изображений.
pratski 06 окт. 2013, в 04:14
1

Таким образом, вместо тегов <img> вы можете разместить любые HTML-элементы, которые вы хотите.
techvineet 06 окт. 2013, в 04:22

Ещё вопросы

Да, я нашел несколько плагинов, таких как rabinglabs.com/slider-rails . Они все для изображений. Я просто не уверен, как можно перебирать @random_users и отображать их вместо изображений.
Таким образом, вместо тегов <img> вы можете разместить любые HTML-элементы, которые вы хотите.

manishie · Accepted Answer · 2013-10-06T02-28-00.000Z

Одним из моих обычных вариантов для слайдера является bxslider: http://bxslider.com/.

Существует рельсы gem bxslider-rails, которые все настраивают для вас: https://github.com/manfe/bxslider-rails

Тогда вы можете сделать что-то вроде этого:

Посмотреть:

<div class="slider-wrapper">
  <ul class="bxslider">
    <% @random_users.each do |user| %>
      <li>
        <%= image_tag user.image %>
        <%= user.name %>
      </li>
    <% end %>
  </ul>
</div>

Javascript:

$('.bxslider').bxSlider({mode: 'fade', auto: true});

CSS:

.slider-wrapper { 
  height:400px;
  width:200px;
}