Add a slider to the homepage of your Spree site, and manage the slideshow from within the Admin panel.
To install, add spree_slider to your Gemfile and run `bundle install`:
gem 'spree_slider', github: 'mindvision/spree_slider', branch: '3-0-stable'
This extension comes with three sliders plugins: Nivo, SimpleCarousel and Anything slider
Depending on which plugin you want to install, run the following command (this will automatically generate the required files and install the migrations):
bin/rails g spree_slider:install_nivo
The slider is almost unstyled. To customize you have to add your own css and
eventually modify the partial copied into your app folder:
app/views/spree/shared/_slider.html.erb
bin/rails g spree_slider:install_cycle2
This slider is updated and tested with spree 3-0-stable and has been modified to be responsive.
bin/rails g spree_slider:install_anything
bin/rails g spree_slider:install_simple_carousel
You may want to theme your site your own way. If you want to include your own library such Bootstrap or Foundation.
Just add your own to your asset pipeline, and update your theme templates with appropriate markup. Example:
<% if Spree::Slide.published.count > 0 %>
<section id="slideshow">
<ul class="slide">
<% Spree::Slide.published.order('position ASC').each do |s| %>
<li>
<h1><%= s.slide_name %></h1>
<%= link_to image_tag(s.slide_image.url), url_for(s.slide_link) %>
</li>
<% end %>
</ul>
<a title="<%= t(:previous) %>" class="slider-prev"><%= t(:previous)%></a>
<a title="<%= t(:next) %>" class="slider-next"><%= t(:next) %></a>
</section>
<% end %>
To use multiple sliders, you can define slider groups in a config/initializers/spree_slider.rb
SpreeSlider.config do |c|
c.slide_groups = [
{ id: 1, name: :home, text: "Homepage Left" },
{ id: 2, name: :side, text: "Side slider" }
]
end
Next you can place a group-spefic slider like this: (where the parameter for_group is the name of the group).
<% Spree::Slide.published.for_group(:home).each do |s| %>
<li>
<%= link_to "", url_for(s.slide_link), class: 'slide', style: "background-image: url(#{s.image.url})" %>
</li>
<% end %>
To add dynamic content, go to the spree admin section, under ‘Configuration’
and find the Spree Slider menu.
Copyright © 2012 R.S.A. released under the New BSD License