git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix image slider

Browse Source
This commit is contained in:
Pyae Phyoe Aung
2023-06-21 11:12:17 +06:30
parent 5da551de75
commit 9357588122
2 changed files with 210 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
app/views/foodcourt/second_display/_slider.html.erb
View File

@@ -1,20 +1,106 @@
<%= stylesheet_link_tag 'wow_style', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'wowslider', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'wow_script', 'data-turbolinks-track': 'reload' %>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="wowslider-container" style="max-width: 100%;">
<div class="ws_images full_screen">
<ul>
<% @display_images.each do |p| %>
<li>
<%= image_tag "#{p.image}", :alt => "rss feed"%>
</li>
<% end %>
</ul>
</div>
<div class="ws_bullets"></div>
</div>
</div>
</div>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;
overflow: hidden;}
.mySlides {
position: absolute;
}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.slide-in {
animation-name: slide-in;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
}
.slide-out {
animation-name: slide-out;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
}
@keyframes slide-in {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
@keyframes slide-out {
0% { transform: translateX(0%); }
50% { opacity: 1; }
100% {
opacity: 0;
transform: translateX(-100%);
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<% @display_images.each do |p| %>
<div class="mySlides slide-out">
<%= image_tag "#{p.image}", :class=> "w-100"%>
</div>
<% end %>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (let i = 0; i < slides.length; i++) {
slides[i].className = slides[i].className.replace("slide-in", "slide-out");
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].className = slides[slideIndex - 1].className.replace("slide-out", "slide-in");
setTimeout(showSlides, 4000); // Change image every 5 seconds
}
</script>

124
app/views/origami/second_display/_slider.html.erb
View File

@@ -1,20 +1,106 @@
<%= stylesheet_link_tag 'wow_style', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'wowslider', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'wow_script', 'data-turbolinks-track': 'reload' %>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="wowslider-container" style="max-width: 100%;">
<div class="ws_images full_screen">
<ul>
<% @display_images.each do |p| %>
<li>
<%= image_tag "#{p.image}", :alt => "rss feed"%>
</li>
<% end %>
</ul>
</div>
<div class="ws_bullets"></div>
</div>
</div>
</div>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;
overflow: hidden;}
.mySlides {
position: absolute;
}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.slide-in {
animation-name: slide-in;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
}
.slide-out {
animation-name: slide-out;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
}
@keyframes slide-in {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
@keyframes slide-out {
0% { transform: translateX(0%); }
50% { opacity: 1; }
100% {
opacity: 0;
transform: translateX(-100%);
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<% @display_images.each do |p| %>
<div class="mySlides slide-out">
<%= image_tag "#{p.image}", :class=> "w-100"%>
</div>
<% end %>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (let i = 0; i < slides.length; i++) {
slides[i].className = slides[i].className.replace("slide-in", "slide-out");
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].className = slides[slideIndex - 1].className.replace("slide-out", "slide-in");
setTimeout(showSlides, 4000); // Change image every 5 seconds
}
</script>