Slicker sliderın heroku'da senkronize olmayışı

Yardım
,
1

Selam arkadaşlar projemi (ruby on rails) heroku’da koşturdum. slickr adında bir CSS kütüphanesi kullanıyorum fakat lokalde sağlıklı çalıştığı gibi çalışmıyor. Yardım ederseniz çok sevinirim.

2

Merhaba @muhammetfaik. İlk olarak hoş geldin. :wave:

Umarım yardım edebiliriz ama detaya ihtiyacımız olacak. Nasıl bir hata alıyorsun? Proje açık kaynaklı değilse kullandığın kütüphaneleri versiyonlarıyla paylaşır mısın?

3

ornek
ornek1883×1080 107 KB

brojenin lokaldeki hali bu ama live’daki hali ise bu https://abramak.herokuapp.com/

4 
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.0.2'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.4', '>= 6.1.4.1'
# Use mysql as the database for Active Record
gem 'mysql2', '~> 0.5'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

group :production do 
  gem 'rails_12factor'
end


# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'owlcarousel-rails'

gem 'webpacker', '~> 5.0'
gem 'bootstrap-sass'
gem 'autoprefixer-rails'
gem 'jquery-slick-rails'
gem 'jquery-rails'
5

gem’in css dosyalarını application.css/scss dosyasına nasıl import ediyorsunuz acaba? slicker-slider’i nasıl import ettiğinizi gösteren bi ekran kaydı atabilir misiniz?

6

app/js/packs/application.js dosyası içinde şöyle bir kullanımım var.



import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import JQuery from 'jquery'

require("slick-carousel")

import "slick-carousel/slick/slick.scss"
import "slick-carousel/slick/slick-theme.scss"
import "../styles/application.scss"

Rails.start()
Turbolinks.start()
ActiveStorage.start()


window.$ = window.JQuery = JQuery;


document.addEventListener("turbolinks:load", function() {
  $('.slider').slick(
    {
      dots: true,
      infinite: true,
      speed: 500,
      cssEase: 'linear',

    }
  )
})

slider’ın bulunduğu bölüm ise şöyle:

<div class="slider">
  <div class="slide"><img style="align:center;" src=<%=asset_path("Screenshotfrom2021-10-2810-05-27.png")%> ></div>
  <div class="slide"><img src=<%=asset_path("EMS-a5v2-scaled-1170x500.jpg")%> ></div>
  <div class="slide"><img src=<%=asset_path("IMG73600.jpg")%> > </div>
  <div class="slide"><img src=<%=asset_path("IMGrohdevhf.jpg")%> ></div>
</div>
7

Layout’unuzun içine


 = stylesheet_pack_tag 'application'

Eklerseniz çalışacaktır diye umuyorum .

1 Beğeni
8

tam yazımı <%= stylesheet_pack_tag 'application' %> şu mu ?

9

Evet tam olarak öyle olması lazım

10

teşekkürler çalıştı :smiley:

11

Rica ederim iyi çalışmalar