Post by ri2k » Fri Jul 01, 2022 8:51 am

I am trying to make a fading banner slideshow in an HTML block and use it in the design as a module.
But I can't seem to make it responsive. I have tried many variations, but can't seem to get it right.
What can I do to make it responsive?

Code: Select all

<style>
  
  .slider {
  max-width: 100%;
  width: 600px;
  height: 200px;

  margin: 10px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(image1.jpg)no-repeat center;
      background-size: cover;
    animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;

} 
.slide2 {
  background: url(image2.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: url(image1.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
</style>


<div class="slider">
  <div class="slide1"></div>
  <div class="slide2"></div>
  <div class="slide3"></div>
</div>

New member

Posts

Joined
Mon Aug 24, 2020 7:31 pm

Post by paulfeakins » Fri Jul 01, 2022 8:13 pm

Not really an OpenCart question but hopefully someone will help ...

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Guru Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom

Post by ri2k » Sat Jul 02, 2022 6:02 am

paulfeakins wrote:
Fri Jul 01, 2022 8:13 pm
Not really an OpenCart question but hopefully someone will help ...
Actually I have no problem making this work on a regular html file.

But I am trying to use this for my opencart site, and I am using the default HTML block with opencart. The problem with opencart HTML block interface is, I don't know where to place the codes or the styles because there is not <head> or <title>. On an html site, I can easily create a separate .css file, or place them on the <head>

On opencart HTML block, there is only the <body>. Where can I place the style or code materials?

New member

Posts

Joined
Mon Aug 24, 2020 7:31 pm

Post by fegdeed » Sat Jul 02, 2022 12:25 pm

I am not sure if it is good practice or not, but you can rearrange it like this.

Code: Select all

<div class="slider">
<style>
   .slider {
  max-width: 100%;
  width: 600px;
  height: 200px;

  margin: 10px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(image1.jpg)no-repeat center;
      background-size: cover;
    animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;

} 
.slide2 {
  background: url(image2.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: url(image1.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
</style>

  <div class="slide1"></div>
  <div class="slide2"></div>
  <div class="slide3"></div>
</div>

Image
Get a secure, fast, and reliable web hosting service from https://turnuphosting.com.


Active Member

Posts

Joined
Fri Sep 21, 2018 12:01 am

Post by ri2k » Mon Jul 04, 2022 7:40 am

Okay, thanks. I will try that and see what happens.
fegdeed wrote:
Sat Jul 02, 2022 12:25 pm
I am not sure if it is good practice or not, but you can rearrange it like this.

Code: Select all

<div class="slider">
<style>
   .slider {
  max-width: 100%;
  width: 600px;
  height: 200px;

  margin: 10px auto;
  position: relative;
}.......
........
  <div class="slide1"></div>
  <div class="slide2"></div>
  <div class="slide3"></div>
</div>

New member

Posts

Joined
Mon Aug 24, 2020 7:31 pm
Who is online

Users browsing this forum: ravikumar22, Semrush [Bot] and 82 guests