Giter Club home page Giter Club logo

spree_slider's Introduction

SpreeSlider

Add a slider to the homepage of your Spree site, and manage the slideshow from within the Admin panel.

Installation

  1. Add this extension to your Gemfile with this line:

Spree >= 3.1

gem 'spree_slider', github: 'spree-contrib/spree_slider'

Spree 3.0 and Spree 2.x

gem 'spree_slider', github: 'spree-contrib/spree_slider', branch: 'X-X-stable'

The branch option is important: it must match the version of Spree you're using. For example, use 3-0-stable if you're using Spree 3-0-stable or any 3.0.x version.

  1. Install the gem using Bundler:
bundle install
  1. Copy & run migrations
bundle exec rake railties:install:migrations
bundle exec rake db:migrate
  1. Restart your server

If your server was running, restart it so that it can find the assets properly.

Using the slider

Spree 3 uses the bootstrap framework and a default slider template is available for bootstrap 3 spree/shared/_slider.html.erb.

Example usage:

  <%= render partial: 'spree/shared/slider', locals: { slider: Spree::Slide.published, cid: 'home', interval: false } %>

If you desire to have a customized carousel template you can specify your own like so:

<% 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.link_url) %>
        </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 %>

Dynamic content management

To add dynamic content, go to the spree admin section, under 'Configuration' and find the Spree Slider & Spree Slider Locations menu.

You can create new slides and new locations. Then to fetch & render the slider for a particular location you can do the following:

  <% slides = Spree::Slide.published.location("home") %>
  <%= render partial: 'spree/shared/slider', locals: { slider: slides } %>

Copyright (c) 2012 R.S.A. released under the New BSD License

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.