Witam, zrobiłem slider, czy wie ktoś jak zmienić to by nie było tych przycisków next play prev,jak zrobić żeby działał on automatycznie jak się włączy stronę, bo trzeba włączyć by działał i jak zrobić by było więcej zdjęć na raz widocznych i jak zmienić ich rozmiary? Tu mam kody css i html:
css:
body { margin:auto; width:850px; padding:0 0 20px 0; font-family:verdana, sans-serif; font-size:12px; }
h3 { margin-top:50px; }
.containerr { width:850px; height:360px; }
.containerr > img, .containerr > div { width:480px; height:360px; display:none; }
#example1 .montePrev, #example1 .monteNext, #example1 .montePlay {
display:block;
background-image:url(buttons.png);
background-repeat:none;
position:absolute;
text-indent:-9999px;
}
#example1 .montePrev { width:29px; height:28px; background-position:0 -46px; bottom:-14px; left:376px }
#example1 .montePrev:hover { background-position:0 -6px; }
#example1 .monteNext { width:29px; height:28px; background-position:-70px -46px; bottom:-14px; left:446px;}
#example1 .monteNext:hover { background-position:-70px -6px; }
#example1 .montePlay { width:41px; height:40px; background-position:-29px -120px; bottom:-20px; left:405px; }
#example1 .montePlay:hover { background-position:-29px -80px; }
#example1 .montePaused { background-position:-29px -40px; }
#example1 .montePaused:hover { background-position:-29px 0px; }
#example3 img { width:100%; height:100%; }
#example3 div div { position:absolute; bottom:0; left:0; background:#fff; width:100%; }
#example3 p { margin:0; color:#000; padding:5px 15px 24px 15px; }
#example3 .frame { position:absolute; top:0; left:0; }
#example3 .montePlay { display:none; }
#example3 .montePrev, #example3 .monteNext {
display:block;
background-image:url(arrows.png);
background-repeat:none;
position:absolute;
top:166px;
width:24px;
height:28px;
text-indent:-9999px;
}
#example3 .montePrev { left:0; background-position:bottom left; }
#example3 .monteNext { right:0; background-position:bottom right; }
#example3 .montePrev:hover { background-position:top left; }
#example3 .monteNext:hover { background-position:top right; }
html:
<script>
$(function () {
// Unstyled Example
$.monte('#example1');
// Styled Buttons Example
// (see the CSS in the above style block)
$.monte('#example2', {auto:false});
// Callback Example
// Format and append the HTML:
$('#example3 > img').each(function(){
$(this)
.wrap('<div style="position:relative"/>')
.parent()
.append('<div><p>' + $(this).attr('alt') + '</p></div>')
.append('<img src="frame.png" alt="" class="frame"/>');
});
// Hide the text on all but the center slide:
$('#example3 div div').css({opacity: 0}).eq(0).css({opacity: 0.8});
// Using the callbacks to reveal and hide the text:
$.monte('#example3', {
auto:false,
callbackIn: function () {
$(this[0]).find('div').animate({opacity: 0.8}, 450);
},
callbackAway: function () {
$(this[0]).find('div').animate({opacity: 0}, 450);
}
});
});
</script>
tak to wyglada
- screenshot-20180904163405.png (374 KB) - ściągnięć: 101
