**Here is my static CSS code found in the CSS file **
section .homebanner {
background: url('../images/33770859_2209.i032.003.P.m005.c33.isometric\ mining\ set.jpg') no-repeat left top #0D0E0E;
animation: banneranimation 15s linear infinite;
background-size: cover;
background-position: center;
}
@keyframes banneranimation {
0% {
background: url('../images/mri-scan-machine-generative-ai_587448-2043.jpg') no-repeat left top #0D0E0E;
background-size: cover;
z-index: -1;
}
65% {
background: url('../images/interior-view-operating-room.jpg') no-repeat left top #0D0E0E;
background-size: cover;
z-index: -1;
}
100% {
background: url('../images/33770859_2209.i032.003.P.m005.c33.isometric\ mining\ set.jpg') no-repeat left top #0D0E0E;
background-size: cover;
z-index: -1;
color: #000 !important;
}
}
And Here The Controller
public function index(){
$Banners=Banner::all();
return view('admin.bannersall',compact('Banners'));
}
AS You know This Banners controller that fetch all the banner image from database
"I expect my output to be dynamic data fetched from the database instead of static data. The data in the database consists only of images, so I want to dynamically fetch this data for each keyframe animation percentage. How can I achieve sending dynamic data for each keyframe animation percentage, based on the data found in the database?"
EXPECTED OUTPUT IS LIKE THIS
@keyframes banneranimation {
0% {
background: url('../images/'.$Banners->image[0]) no-repeat left top #0D0E0E;
background-size: cover;
z-index: -1;
}
65% {
background: url('../images/'.$Banners->image[1]) no-repeat left top #0D0E0E;
background-size: cover;
z-index: -1;
}
100% {
background: url('../images/'.$Banners->image[2]) no-repeat left top #0D0E0E;
background-size: cover;
z-index: -1;
color: #000 !important;
}
}