scrolling banner with divi.. video explanation provided

Hi - i've made a video explaining my issue.

vid @ ---> http://screencast-o-matic.com/watch/cbVtqGQN3N

Short version is that i need this code: http://codepen.io/anon/pen/wgPgKw

working on this site: http://shr.globedigitaltesting.xyz/ using the divi theme. not sure why its not working currently

thanks in advance

  • Adam Czajczyk

    Hello Ryan,

    I hope you're well today and thank you for your question!

    I checked the site and I think the first thing to sort out would be to enclose JS code within "script" tags. I mean the code that you added inside the DIVI "Integrations" box into the "head" code. Try putting in there like this:

    <script type="text/javascript">
    function slideSlider(){
      $("#slider-scroller").css({"left":"0%","transition":"all 0s linear"});
      $("#slider-scroller").css({"left": String(parseInt($("#slider-scroller").css("left")) - 500) + "px","transition":"all 5s linear"});
      setTimeout(function(){moveSliderItem()}, 2635);
    }
    
    function moveSliderItem(){
      $("#slider-scroller div").first().detach().appendTo($("#slider-scroller"));
      slideSlider();
    }
    
    slideSlider();
    </script>

    Let me know please if that helped or if I should examine it further :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Ryan!

    I tested the code and there's some additional change necessary. Try this code instead of the one I suggested recently:

    <script type="text/javascript">
    jQuery(function($) {
    	function slideSlider(){
    		$("#slider-scroller").css({"left":"0%","transition":"all 0s linear"});
    		$("#slider-scroller").css({"left": String(parseInt($("#slider-scroller").css("left")) - 500) + "px","transition":"all 5s linear"});
    		setTimeout(function(){moveSliderItem()}, 2635);
    	}
    
    	function moveSliderItem(){
    		$("#slider-scroller div").first().detach().appendTo($("#slider-scroller"));
    		slideSlider();
    	}
    
    	slideSlider();
    });
    </script>

    Applied the same way as you did on your site, it seems to be working fine on my end.

    Let me know if it helped, please :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Ryan!

    I checked your site again and the slider is actually working now. However, the images are "hidden", they are "lowered" that far that they go below the bottom edge of the box.

    You will notice that if you refresh the page a few times: you should see a part of one image quickly moving away from the box :slight_smile:

    I think this should be relatively easy to fix. For some reason a lot of "br" (line break) HTML tags got into the HTML code right before the first slide/image. This is the slider HTML on your site (note "br" tags):

    Please check the "code" element's content on a page (where you put HTML part) and see if there are any empty lines at the top, if they are, remove them and that should fix the issue.

    If that doesn't work, there's also a CSS "workaround" (you may add that CSS to custom CSS on the site):

    #slider-scroller br {display:none;}

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.