ok now i have another problem.
i make a slideshow, but it show half of the image. what the problem? here my code.
HTML:
<div class="full-width">
<div class="inner">
<div class="slide">
<img src="images/slide1.jpg" width="1682" height="745">
</div>
<div class="slide">
<img src="images/slide2.jpg" width="1682" height="745">
</div>
</div>
<div class="slide-nav"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="slider.js"></script>
<script>
$('.full-width').fullWidth();
</script>
CSS:
.full-width {
overflow: hidden;
position: relative;
background: #fff;
}
.full-width,
.full-width .slide img {
width: 100%;
height: 745px;
top: 140px;
}
.full-width:hover {
background: transparent;
}
.full-width .inner {
overflow-y: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter: alpha(opacity=00);
-moz-opacity: 0;
opacity: 0;
height: 100%;
}
.full-width .slide {
float: left;
overflow-x: hidden;
position: relative;
}
.full-width .slide img {
height: 745px;
padding-top: 200px;
}
.full-width .slide div {
color: #fff;
position: absolute;
padding: 0 5%;
left: 0;
width: 90%;
text-align: right;
font-size: 32px;
}
.full-width .slide div p {
float: right;
text-align: left;
padding: 10px;
margin: 0;
background: rgba(0, 0, 0, 0.8);
}
.full-width .controls a {
position: absolute;
top: 50%;
margin-top: -46px;
display: block;
background: rgba(0, 0, 0, 0.5);
text-decoration: none;
color: #fff;
font-size: 40px;
padding: 0 10px 2px 7px;
line-height: 40px;
*display: none;
}
.full-width .controls a.left {
left: 0px;
}
.full-width .controls a.right {
right: 0px;
}
.full-width .slide-nav {
*display: none;
font-size: 75px;
margin: 0 auto;
line-height: 50px;
font-family: 'Helvetica', Arial, sans-serif;
}
.full-width .slide-nav span {
cursor: pointer;
color: #ccc;
}
.full-width .slide-nav span.current {
color: #333;
}
.lt-ie9 .full-width p,
.lt-ie9 .full-width .controls a {
background: url('bg-trans.png') repeat;
_background: #333;
}
JS:
(function($){
"use strict";
$.fn.fullWidth = function(options) {
var defaults = {
maxHeight : 745,
minHeight : 375,
delay : 5000,
transition : 1000,
maxFont : 36,
minFont : 20
}, settings = $.extend(defaults, options);
return this.each( function() {
var full = $(this),
inner = full.find('.inner'),
slides = inner.find('.slide'),
images = slides.find('img'),
nav = full.find('.slide-nav'),
controls = full.find('.controls a'),
navCircles = '',
smallest = 9999,
status = {current : 0, max : slides.length - 1},
timers = {slides : '', resize : ''},
move = function(direction, current){
if(inner.is(':animated')) return;
stop();
if(direction === 'right'){
status.current = status.current+1 > status.max ? 0 : status.current+1;
}else if(direction === 'left'){
status.current = status.current-1 < 0 ? status.max : status.current-1;
}else{
status.current = current || 0;
}
navCircles.removeClass('current').eq(status.current).addClass('current');
inner.animate({'margin-left' : '-'+100*status.current+'%'}, settings.transition ,function(){ start(); });
},
start = function(){
timers.slides = setTimeout(function(){ move('right'); }, settings.delay);
},
stop = function(){
clearTimeout(timers.slides);
},
resize = function(){
var wWidth = $(window).width(),
newHeight = parseInt(wWidth/3, 10),
imageCSS = wWidth <= smallest ? ['100%', 'auto', '9999'] : ['', '', ''],
start = inner.height(),
divCSS = wWidth <= 480 ? ['0', '100%', 'none'] : ['', '', ''],
size = wWidth/41;
/*
size equals window width divided by 41 - 41 was chosen as it creates a nicely proportionate font size.
However, you can experiment with this if you want a generally larger or smaller size to be set.
For example: a width of 960px/41 = 23.4px, with 20 instead of 41 you'd get a font size of 48px.
It really depends on what kind of content you're displaying and how much text you've got on each slide.
*/
size = size > settings.maxFont ? settings.maxFont :
(size < settings.minFont ? settings.minFont : size);
inner.css('height', function(){
return newHeight > settings.maxHeight ? settings.maxHeight :
(newHeight < settings.minHeight ? settings.minHeight : newHeight);
});
images.css({
'margin-top' : function(){
var curr = $(this).height();
return '-'+(start > curr ? 0 : curr-start)/2+'px';
},
'height' : imageCSS[0], 'width' : imageCSS[1], 'maxWidth' : imageCSS[2]
});
slides.find('div').css({
'font-size' : size,
'top' : function(){
var diff = start-$(this).height();
return wWidth <= 480 ? diff : diff/2;
},
'padding' : divCSS[0], 'width' : divCSS[1]
}).find('br').css('display', divCSS[2]);
},
attachEvents = function(){
$(window).resize(function(){
clearTimeout(timers.resize);
timers.resize = setTimeout(function(){ resize(); }, 100);
}).trigger('resize');
controls.on('click', function(){
move(this.className);
return false;
});
full.on('mouseenter mouseleave', function(e){
if(controls.is(':animated')) return;
e.type === 'mouseenter' ? controls.fadeIn() : controls.fadeOut();
});
navCircles.on('click', function(){
move('direct', $(this).index());
});
$(document).on('keydown', function(e){
if(!(e.which === 37 || e.which === 39)) return;
move(e.which === 37 ? 'left' : 'right');
});
};
(function(){
inner.css('height', settings.minHeight);
images.each(function(){
var w = $(this).attr('width');
smallest = w < smallest ? w : smallest;
});
slides.each(function(i){
$(this).addClass('slide-'+(i+1));
});
inner.css('width', (slides.length*100)+'%');
slides.css('width', parseFloat(100/slides.length, 10)+'%').each(function(){
nav.append('<span>•</span>');
});
slides.find('div').wrapInner('<p />');
navCircles = nav.find('span');
navCircles.first().addClass('current');
nav.css('width', function(){
return navCircles.length*26;
});
$(window).load(function() {
attachEvents();
inner.fadeTo(1000, 1, function(){
start();
});
});
}());
});
};
}(jQuery));
