I recently integrated a slider from into my website, following the installation instructions. However, I seem to be facing some conflicts with another script that controls animated div movements on the same page.
Upon loading the page, all elements of the slider such as numbers, navigation controls, and spacing are visible, but the images do not appear at all. I have double-checked the image URLs and they are correctly linked. The list items or slides also seem to be in order. It seems like there might be either a script conflict or an issue related to the positioning of the slider on the page, given that the page layout heavily relies on relative positioning and numerous percentage values.
** Slider Css **
ul.bjqs {
position: relative;
list-style:none;
padding:0;
margin:0;
overflow:hidden;
display:none;
}
li.bjqs-slide {
position:absolute ;
display:none;
}
ul.bjqs-controls {
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
ul.bjqs-controls.v-centered li a {
position:absolute;
}
ul.bjqs-controls.v-centered li.bjqs-next a {
right:0;
}
ul.bjqs-controls.v-centered li.bjqs-prev a {
left:0;
}
ol.bjqs-markers {
list-style: none;
padding: 0;
margin: 0;
width:100%;
}
ol.bjqs-markers.h-centered {
text-align: center;
}
ol.bjqs-markers li {
display:inline;
}
ol.bjqs-markers li a {
display:inline-block;
}
p.bjqs-caption {
display:block;
width:96%;
margin:0;
padding:2%;
position:absolute;
bottom:0;
}
** HTML **
<div id="slides">
The ul list sits in here with li img src /li. (sorry couldnt get lists to work in the editor. :(
</div>
** Conflicting scripts **
<script type="text/javascript">
$(document).ready(function() {
$('#p-load').hide().delay(500).fadeIn("slow");
});
</script>
<!-- ꜜꜜ slider ꜜꜜ -->
<script class="secret-source">
jQuery(document).ready(function($) {
$('#slides').bjqs({
animtype : 'slide',
automatic : 'true',
height : 320,
width : 720,
responsive : true,
randomstart : true,
showmarkers : false
});
});
</script>
The script above the slider script initiates the page div animations.