osem-fcy/app/views/conference/_schedule.html.erb

<div id="schedule-content">
  <h1 class="text-center"> Schedule for <%= @conference.title %></h1>
  <div class="dropdown schedule-dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <%= @dates.first %>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <% @dates.each do |date| %>
        <li class='li-dropdown-schedule'>
          <%= link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab" %>
        </li>
    <% end %>
    </ul>
  </div>

  <div class="tab-content">
    <% @dates.each do |date| %>
      <div class="tab-pane <%= 'active' if @dates.first == date %>" id ="<%= date %>" >

        <div class="visible-xs-inline">
          <% number_columns = 1 %>
          <%= render 'carousel', date: date, number_columns: number_columns %>
        </div>

        <div class="visible-sm-inline">
          <% number_columns = 2 %>
          <%= render 'carousel', date: date, number_columns: number_columns %>
        </div>

        <div class="visible-md-inline visible-lg-inline">
          <% number_columns = 3 %>
          <%= render 'carousel', date: date, number_columns: number_columns %>
        </div>

      </div> <!-- Tab -->
    <% end %>
  </div>
</div>
<%= javascript_tag do %>
// change of active tab and the button title when a date clicked
$(function() {
  $('.date-tab').on('click', function(e) {
    $('.li-dropdown-schedule').removeClass('active');
    $('.schedule-dropdown').find('button').text($(this).text());
  });
});

// use the date tag in the url to select a tab and the title of the button
$(function() {
    var hash = window.location.hash;
    if(hash && !(hash === '#schedule')){
      hash && $('ul a[href="' + hash + '"]').tab('show');
      $('button.dropdown-toggle').text(hash.substr(1));
    }
});

// hide the right and left controls when neccesary after moving the carousel
$('.carousel').on('slid.bs.carousel', '',
function(){
  $(this).children('.left.carousel-control').show();
  $(this).children('.right.carousel-control').show();
  if($(this).find('.first').hasClass('active')) {
    $(this).children('.left.carousel-control').hide();
  } else if($(this).find('.last').hasClass('active')) {
    $(this).children('.right.carousel-control').hide();
  }
});

$(document).ready(function(){
  // hide the left control when the page is ready
  $('.carousel').children('.left.carousel-control').hide();

  // carousel swipe
  $(".carousel-inner").swiperight(function() {
    $(this).parent().carousel('prev');
  });
  $(".carousel-inner").swipeleft(function() {
    $(this).parent().carousel('next');
  });
});
<% end %>