I am totally new to jssor, and a less than novice coder. I just discovered the jssor carousel slider today, and I have been fooling around with it for probably 10 hours.
I have managed to solve most of my issues by reviewing other questions on this site, but I have been running around is circles for the past several hours.
First off to clarify, I love the Slider and it's ability to scale, but I need it to be more basic, and somewhat stay where I put it. :) I think after many hours I have got it to stay in one place just under my navigation, and it seems to be good there (although I probably did the the worse way possible.
My main issue now is that it seems to work perfect in IE, and on my native android cell browser, but on Chrome and Safari, the carousel won't keep its height. My photos are @ 200x180, and in IE11, they appear to be the proper size. In the other browsers, the slider is only showing to be about 1/2" high.
My pages are PHP, and I call the slider page onto my home page with an "Include" statement (sorry, I seriously green). Now the code I pulled off of jssor.com does have some html references, so that could be giving me some issues, as well.
You can check it out live at (SilverScreenCollectibles.com). I've also pasted the code below (that I am using on my PHP page) so that you can see how bad I am at this.
I would really appreciate any assistance that anyone out there could offer.
Thanks,
Bill
<!DOCTYPE html>
<html>
<head>
<div class="span9">
<script src="assets/js/jquery-1.8.2.min.js" type="text/javascript"> </script>
<script src="assets/js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// create carousel
$('#carousel').carouFredSel({
responsive: false,
items: {
width: 200,
height: '90%',
visible: 8
},
auto: {
items: 1
},
prev: '#prev',
next: '#next'
});
// re-position the carousel, vertically centered
var $elems = $('#wrapper, #prev, #next'),
$image = $('#carousel img:first')
$(window).bind( 'resize.example', function() {
var height = $image.outerHeight( true );
$elems
.height( height )
// .css( 'marginTop', -( height/2 ) );
}).trigger( 'resize.example' );
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 50px;
position: relative;
}
body h3 {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 20px;
text-align: center;
color: #999;
margin: 0;
padding-top: 50px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper, #prev, #next {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
height: 170px;
position: absolute;
/* top: 35%;*/
margin-top: 0px;
}
#wrapper {
width: 80%;
left: 10%;
overflow: hidden;
box-shadow: 0 0 10px #ccc;
}
#carousel img {
margin: 10px 5px;
border: none;
display: block;
float: left;
}
#prev, #next {
background: center center no-repeat #ccc;
width: 5%;
}
#prev:hover, #next:hover {
background-color: #bbb;
}
#prev {
background-image: url( assets/slide-imgs/form/gui-prev.png );
left: 0;
}
#next {
background-image: url( assets/slide-imgs/form/gui-next.png );
right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="cw4/images/product_full/LC-ChainedFrt.jpg" alt="Image1" width="212" height="180" onclick="window.location.replace('http://silverscreencollectibles.com/product.php?product=110');" />
</div>
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
</body>
