Home>

As mentioned in the title, when deploying my own Rails application on AWS EC2,
There is a bug that the slide show introduced by Skipper.js is not displayed after the page transition.
For some reason, it is displayed when reloading, but I do not know the cause, so I would appreciate it if you could tell me.
Thank you.

Implementation image

Screen after page transition

Screen after reloading

code

app/views/home/about.html.erb

                         


app/assets/stylesheets/home.scss

.image1 {
  background-image: image-url ("test1.jpg");
}
.image2 {
  background-image: image-url ("test2.jpg");
}
.image3 {
  background-image: image-url ("test3.jpg");
}
.image4 {
  background-image: image-url ("test4.jpg");
}
.image5 {
  background-image: image-url ("test5.jpg");
}


app/assets/javascripts/application.js

// = require rails-ujs
// = require turbolinks
// = require jquery
// = require bootstrap-sprockets
// = require_tree.
$(function () {
    $('.home-about h1'). on ('click', function () {
        $(this) .toggleClass ("h1-clicked");
        // @todo: toggle// If there is a specified class, remove that class
        // If the specified class does not exist, add that class
    });
    $("# theTarget"). skippr ({
        // Slideshow changes ("fade" or "slide")
        transition:'slide',
        // Time to change (milliseconds)
        speed: 1000,
        // Type of easing
        easing:'easeOutQuart',
        // Navigation form ("block" or "bubble")
        navType:'block',
        // Child element type ("div" or "img")
        childrenElementType:'div',
        // Display navigation arrow (displayed as true)
        arrows: true,
        // Slideshow autoplay (false with no autoplay)
        autoPlay: true,
        // Slide switching interval (milliseconds) during automatic playback
        autoPlayDuration: 3000,
        // Setting slide feed with arrow keys on the keyboard (valid for true)
        keyboardOnAlways: true,
        // Whether to show the back arrow when displaying the first slide (hide with false)
        hidePrevious: false
    });
});


app/config/environments/production.rb

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.
  # Code is not reloaded between requests.
  config.cache_classes = true
  #Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  #Rake tasks automatically ignore this option for performance.
  config.eager_load = true
  #Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local = false
  config.action_controller.perform_caching = true
  #Ensures that a master key has been made available in either ENV ["RAILS_MASTER_KEY"]
  # or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
  # config.require_master_key = true
  # Disable serving static files from the `/ public` folder by default since
  #Apache or NGINX already handles this.
  config.public_file_server.enabled = ENV ['RAILS_SERVE_STATIC_FILES'] .present?
  # Compress JavaScripts and CSS.
  config.assets.js_compressor =: uglifier
  # config.assets.css_compressor =: sass# Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false
  # `config.assets.precompile` and` config.assets.version` have moved to config/initializers/assets.rb
  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host ='http://assets.example.com'
  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header ='X-Sendfile' # for Apache
  # config.action_dispatch.x_sendfile_header ='X-Accel-Redirect' # for NGINX
  #Store uploaded files on the local file system (see config/storage.yml for options)
  config.active_storage.service =: local
  #Mount Action Cable outside main process or domain
  # config.action_cable.mount_path = nil
  # config.action_cable.url ='wss: //example.com/cable'
  # config.action_cable.allowed_request_origins = ['http://example.com', /http: \/\/example. * /]
  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true
  #Use the lowest log level to ensure availability of diagnostic information
  # when problems arise.
  config.log_level =: debug
  # Prepend all log lines with the following tags.
  config.log_tags = [: request_id]
  # Use a different cache store in production.
  # config.cache_store =: mem_cache_store
  # Use a real queuing backend for Active Job (and separate queues per environment)
  # config.active_job.queue_adapter =: resque
  # config.active_job.queue_name_prefix = "FRS_ # {Rails.env}"
  config.action_mailer.perform_caching = false
  #Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
  # config.action_mailer.raise_delivery_errors = false
  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true
  # Send deprecation notices to registered listeners.
  config.active_support.deprecation =: notify
  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = :: Logger :: Formatter.new
  # Use a different logger for distributed setups.
  # require'syslog/logger'
  # config.logger = ActiveSupport :: TaggedLogging.new (Syslog :: Logger.new'app-name')
  if ENV ["RAILS_LOG_TO_STDOUT"]. present?
    logger = ActiveSupport :: Logger.new (STDOUT)
    logger.formatter = config.log_formatter
    config.logger = ActiveSupport :: TaggedLogging.new (logger)
  end
  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false
end
  • Answer # 1

    If turbolinks is enabled, try disabling it.

    Reference https://qiita.com/ryico/items/157b0f4288ce605de2a2