-1

Recently, I added a bxslider (http://bxslider.com/examples/manual-show-without-infinite-loop) to view galleries in a rails project. I have followed the instructions here (https://github.com/stevenwanderski/bxslider-4) to the best of my understanding, but my gallery images are showing up in a list rather than within the slider. I have attached my code below, and would like to know how I solve this strange behavior.

\app\views\galleries\show.html.erb

<div id="embed_gallery" >
            <%= render :partial => 'projects/embed', :collection => @projects, :as => :project%>
</div>

\app\views\galleries\embed.html.erb

<% title h(@gallery.name) %>
<% @section = "explore" %>
<%= javascript_include_tag :defaults %>

<div id="embed_gallery">
    <ul class="bxslider">
      <%= render :partial => 'projects/embed', :collection => @gallery.projects, :as => :project %>
    </ul>
</div>

\app\views\layouts\embed_layout.html.erb

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <%= javascript_include_tag 'jquery.bxslider.min' %>
    <%= stylesheet_link_tag 'jquery.bxslider'%>

    <!-- jQuery library (served from Google) -->
    <%= javascript_include_tag 'ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' %>

    <script type="text/JavaScript">
        $(document).ready(function(){
            $('.bxslider').bxSlider({
                infiniteLoop: false,
                hideControlOnEnd: true
            });
        });
    </script>
</html>

app\assets\javascripts\embed_scripts.js

//= require jquery
//= require js/jquery.bxslider.min.js
//= require lib/jquery.bxslider.css

I have the js/jquery.bxslider.min.js and lib/jquery.bxslider.css files included in my project, but still for some reason, the bxslider is not appearing on my page! What am I missing?

user3694391
  • 133
  • 1
  • 2
  • 12
  • I've used BXSlider in the past (not with rails). Any chance you can post a link to a live demo of the site? From the sounds of it, my first guess would be that the CSS not being properly linked. – Bernard Jun 05 '14 at 18:01

1 Answers1

0

The output of your code should be similar to http://jsbin.com/veyexaki/2/edit?html,output. It also makes sense to check if there is no any javascript errors in your code (click F12 to run dev tools in the browser and check console).

user2316116
  • 6,726
  • 1
  • 21
  • 35