Adding swipejs library

How about creating a slideshow in the home page? For slideshow, we will use the SwipeJS library.

Swipejs

Let’s find it at: https://github.com/bradbirdsall/Swipe

Then put the swipe.js in the vendor/assets/javascripts/ folder.

And we need to include it in the application.js file.

  
  //= require jquery
  //= require jquery_ujs
  //= require swipe
  //= require_tree .

From the SwipeJS doc, we copy and paste the styling to app/assets/stylesheets/pages.css.scss file.

 1.swipe {
 2  overflow: hidden;
 3  visibility: hidden;
 4  position: relative;
 5}
 6.swipe-wrap {
 7  overflow: hidden;
 8  position: relative;
 9}
10.swipe-wrap > div {
11  float:left;
12  width:100%;
13  position: relative;
14}

And then the logic to get it started. pages.js.coffee file:

1$ ->
2  window.mySwipe = Swipe(document.getElementById('slider'), {
3    auto: 3000
4  })

It would be best to create a dedicate cropping ratio for our slideshow, so we will add it to our paperclip-based model — photo.rb file.

  
  has_attached_file :file, styles: {
    cover: "1000x600#",
    medium: "300x300>",
    thumb: "100x100>" },
    default_url: "/images/:style/missing.png"

Then we would refresh the cropping thumbnail generation with the paperclip command.

1$ rake paperclip:refresh CLASS=Photo

Now we need some photos for the home page. In the pages controller:

1class PagesController < ApplicationController
2  def index
3    @slide_photos = Photo.limit(5)
4    @photos = Photo.limit(10)
5  end
6end

And we can use the following code in view pages/indeb.html.erb for the related @slide_photos collection.

1<div id='slider' class='swipe'>
2  <div class='swipe-wrap'>
3    <%- @slide_photos.each do |p| %>
4      <div><%= image_tag p.file.url(:cover) %></div>
5    <%- end %>
6  </div>
7</div>