locked
Hi i need help with a disfunctional slideshow RRS feed

  • Question

  • User1451609391 posted

    Hello. I have an infinite scrolling image of clouds on my website. I use an mvc website right now. My clouds were running from one side of the screen to the other infinity until today they just stopped working. This is my following code.

    this is on my Layout.cshtml page. The div and the clouds load properly but they stopped rotating.


    <div class="slideshow" style="z-index:999995; ; top:60px; left:0px; width:100%; height:341px; overflow:hidden;">
    <div class="images"></div>
    </div>

    This is in my site.css file


    .slideshow {
    ;
    overflow: hidden;
    }

    .images {
    background: url(../Content/Images/newclouds3.png);
    ;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    animation: slideshow 140s linear infinite;
    }


    @keyframes slideshow {

    0% {
    left: 0;
    }

    100% {
    left: -200%;
    }
    }

    It is driving me crazy. When i run this code in a blank index.html page it runs fine. But all of a sudden on my Layout.cshtml page it just wont work. Is there anything on an mvc5 site that could make this code stop working? If no one has an answer maybe someone knows another way to achieve this effect thanks.

    Friday, July 31, 2020 9:07 PM

All replies

  • User475983607 posted

    Open dev tools and looks for JS errors in the console.  Also check the styles are applied to the elements are expected.  You cna use Dev Tools to do the same.  Since you have a working page it should be simple to find the delta.

    Friday, July 31, 2020 9:14 PM
  • User1451609391 posted

    Actually i figured this out. It works on firefox but i upgraded to firefox edge. Does anyone know how to make this code compatible on all browsers? thanks

    Friday, July 31, 2020 9:14 PM
  • User303363814 posted

    I haven't tried executing this (could you make a .html page with just the relevant parts and post it to make it easy for others to test?)

    but ...

    I noticed that the class 'slideshow' has (which, I would guess, is what you want) but that the div has a style, which overrides, and sets .

    If you need the div to be at an absolute position inside some outer container then you will need a wrapper to apply the to.  Then div.slideshow can be relative (within that wrapper div)  Something like

    <div id="wrapper"> <=== Note - no style
       <div class="slideshow">  <=== Note no style
          <img
       ...
    
    
    #wrapper { ; top: ... whatever}
    .slideshow ... as you currently have it

    If you can make a small .html that anyone can open, that makes it much easier to give you suggestions.

    Saturday, August 1, 2020 12:51 AM