Hi, I have 2 simple sliders ( named TopSlider and BottomSlider in slider ID field ). Individually they work fine but when both on the same page there is a conflict ..... the second slider just 'blinks' between slides opposed to desired animation effects.This is the code I have put in the header as per instructions. Is there anything I am missing...?
<!--% Start of the headers for CoffeeCup Responsive Content Slider %-->
<link href="TopSlider/css/slideshow.css" rel="stylesheet">
<script>document.createElement( "picture" );</script>
<script src="TopSlider/js/picturefill.js" class="picturefill" async="async"></script>
<link rel="stylesheet" href="TopSlider/css/main.css">
<script src="TopSlider/js/jquery-1.8.2.min.js"></script>
<script src="TopSlider/js/revolver.min.js"></script>
<script src="TopSlider/js/slideshow.js"></script>
<!--% End of the headers for CoffeeCup Responsive Content Slider %-->
<!--% Start of the headers for CoffeeCup Responsive Content Slider %-->
<link href="BottomSlider/css/slideshow.css" rel="stylesheet">
<script>document.createElement( "picture" );</script>
<script src="BottomSlider/js/picturefill.js" class="picturefill" async="async"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Martel+Sans">
<link rel="stylesheet" href="BottomSlider/css/main.css">
<script src="BottomSlider/js/jquery-1.8.2.min.js"></script>
<script src="BottomSlider/js/revolver.min.js"></script>
<script src="BottomSlider/js/slideshow.js"></script>
<!--% End of the headers for CoffeeCup Responsive Content Slider %-->