|
Слайдер не резиновый
Здравствуйте! Значит в сладере заадаптивил каритинки они теперь резиновые, но проблема в том что слайдер при этом остался статичным, то есть подключаю скрипт слайдера вся резиновость картинок пропадает, при уменьшении страницы картинки не уменьшаются, прямо не знаю что делать, никаких зацепок нет?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var slideWidth = 980,
sliderTimer, currentSlide = 0, len;
function nextSlide() {
currentSlide++;
if (currentSlide >= len) currentSlide = 0;
$(".slidewrapper").animate({
left: -currentSlide * slideWidth
}, 800)
}
function prevSlide() {
currentSlide--;
if (currentSlide < 0) currentSlide = len - 1;
$(".slidewrapper").animate({
left: -currentSlide * slideWidth
}, 800)
}
$(function() {
len = $(".slidewrapper").children().length
$(".slidewrapper").width(len * slideWidth);
sliderTimer = setInterval(nextSlide, 3000);
$("#slider").on({
mouseenter: function() {
clearInterval(sliderTimer)
},
mouseleave: function() {
sliderTimer = setInterval(nextSlide, 3000)
}
});
$("#next_slide").click(function(event) {
event.preventDefault();
clearInterval(sliderTimer);
nextSlide()
});
$("#prev_slide").click(function(event) {
event.preventDefault();
clearInterval(sliderTimer);
prevSlide()
})
});
</script>
<style>
#slider {
max-width:973px;
height: auto;
position: relative;
overflow: hidden;
border: 3px solid rgba(75, 77, 97,0.6);
}
.clearfix {
width:100%;
height: auto;
display: block;
}
.slidewrapper{
position: absolute;
max-width:3000px;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
#slider li > .img-responsive {
width:100%;
height:auto;
display: block;
}
.slidewrapper .slide {
float:left;
list-style-type: none;
max-width:977px;
}
#slider .arrows {
top:50%;
}
#slider #prev_slide {
z-index: 10000;
position: absolute;
left:0;
margin-top:-25px;
}
#slider #next_slide {
z-index: 10000;
position: absolute;
right:0;
margin-top:-25px;
}
.fa-arrow-circle-left,.fa-arrow-circle-right {
background: #000;
font-size: 50px !important;
opacity: 0.5;
border-radius: 50%;
}
.fa:hover {
opacity: 1;
}
</style>
</head>
<body>
<div id="slider">
<ul class="slidewrapper" data-current="0">
<li class="slide"><img class="img-responsive" src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
<li class="slide"><img class="img-responsive" src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
<li class="slide"><img class="img-responsive" src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
</ul>
<a href="javascript: void(0)" id="prev_slide" class="arrows"><i class="fa fa-arrow-circle-left"></i></a>
<a href="javascript: void(0)" id="next_slide" class="arrows"><i class="fa fa-arrow-circle-right"></i></a>
<img src="img/cl_fix.png" alt="clear" class="clearfix">
</div>
</body>
</html>
|
Cdelphi78,
в чём резиновость то если при изменении окна li не меняют свой размер, а картинки согласно вашему css занимают всю ширину li |
ААА, отключите скрипт, не отключил.посмотрите, у меня работает.
|
Цитата:
|
Вот, посмотрите, сейчас картинки резиновые, подключаю скрипт начинаются проблемы с резиной.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<!--<script>
var slideWidth = 980,
sliderTimer, currentSlide = 0, len;
function nextSlide() {
currentSlide++;
if (currentSlide >= len) currentSlide = 0;
$(".slidewrapper").animate({
left: -currentSlide * slideWidth
}, 800)
}
function prevSlide() {
currentSlide--;
if (currentSlide < 0) currentSlide = len - 1;
$(".slidewrapper").animate({
left: -currentSlide * slideWidth
}, 800)
}
$(function() {
len = $(".slidewrapper").children().length
$(".slidewrapper").width(len * slideWidth);
sliderTimer = setInterval(nextSlide, 3000);
$("#slider").on({
mouseenter: function() {
clearInterval(sliderTimer)
},
mouseleave: function() {
sliderTimer = setInterval(nextSlide, 3000)
}
});
$("#next_slide").click(function(event) {
event.preventDefault();
clearInterval(sliderTimer);
nextSlide()
});
$("#prev_slide").click(function(event) {
event.preventDefault();
clearInterval(sliderTimer);
prevSlide()
})
});
</script>-->
<style>
#slider {
max-width:973px;
height: auto;
position: relative;
overflow: hidden;
border: 3px solid rgba(75, 77, 97,0.6);
}
.clearfix {
width:100%;
height: auto;
display: block;
}
.slidewrapper{
position: absolute;
max-width:3000px;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
#slider li > .img-responsive {
width:100%;
height:auto;
display: block;
}
.slidewrapper .slide {
float:left;
list-style-type: none;
max-width:977px;
}
#slider .arrows {
top:50%;
}
#slider #prev_slide {
z-index: 10000;
position: absolute;
left:0;
margin-top:-25px;
}
#slider #next_slide {
z-index: 10000;
position: absolute;
right:0;
margin-top:-25px;
}
.fa-arrow-circle-left,.fa-arrow-circle-right {
background: #000;
font-size: 50px !important;
opacity: 0.5;
border-radius: 50%;
}
.fa:hover {
opacity: 1;
}
</style>
</head>
<body>
<div id="slider">
<ul class="slidewrapper" data-current="0">
<li class="slide"><img class="img-responsive" src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
<li class="slide"><img class="img-responsive" src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
<li class="slide"><img class="img-responsive" src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
</ul>
<a href="javascript: void(0)" id="prev_slide" class="arrows"><i class="fa fa-arrow-circle-left"></i></a>
<a href="javascript: void(0)" id="next_slide" class="arrows"><i class="fa fa-arrow-circle-right"></i></a>
<img src="img/cl_fix.png" alt="clear" class="clearfix">
</div>
</body>
</html>
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var slideWidth,
sliderTimer,
currentSlide = 0,
len;
function StarT () {
if($(window).width()>980) slideWidth = 980;
else slideWidth = parseInt($(window).width());// alert(slideWidth);
function nextSlide() {
currentSlide++;
if (currentSlide >= len) currentSlide = 0;
$(".slidewrapper").animate({
left: -currentSlide * slideWidth
}, 800)
}
function prevSlide() {
currentSlide--;
if (currentSlide < 0) currentSlide = len - 1;
$(".slidewrapper").animate({
left: -currentSlide * slideWidth
}, 800)
}
$(function() {
$('#slider').css({'max-width':slideWidth+'px','height':''+parseInt(.307*slideWidth)+'px'});
len = $(".slidewrapper").children().length
$(".slidewrapper").width(len * slideWidth);
sliderTimer = setInterval(nextSlide, 3000);
$("#slider").on({
mouseenter: function() {
clearInterval(sliderTimer)
},
mouseleave: function() {
sliderTimer = setInterval(nextSlide, 3000)
}
});
$("#next_slide").click(function(event) {
event.preventDefault();
clearInterval(sliderTimer);
nextSlide()
});
$("#prev_slide").click(function(event) {
event.preventDefault();
clearInterval(sliderTimer);
prevSlide()
})
});
}; StarT ();
var timID2;
$(window).resize(function() {
if($(window).width()>=980) return;
//Тут коды переинициализации;
clearTimeout(timID2);
clearInterval(sliderTimer);
$(".slidewrapper").stop(true);
$(".slidewrapper").css({'left':0})
timID2 = setTimeout(function(){StarT()},700);
});
</script>
<style>
#slider {
max-width:973px;
height:280px;
position: relative;
overflow: hidden;
border: 3px solid rgba(75, 77, 97,0.6);
}
.clearfix {
width:100%;
height: auto;
display: block;
}
.slidewrapper{
position: absolute;
max-width:3000px;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
#slider li > .img-responsive {
width:100%;
height:auto;
display: block;
}
.slidewrapper .slide {
float:left;
list-style-type: none;
max-width:33.3%;
}
#slider .arrows {
top:50%;
}
#slider #prev_slide {
z-index: 10000;
position: absolute;
left:0;
margin-top:-25px;
}
#slider #next_slide {
z-index: 10000;
position: absolute;
right:0;
margin-top:-25px;
}
.fa-arrow-circle-left,.fa-arrow-circle-right {
background: #000;
font-size: 50px !important;
opacity: 0.5;
border-radius: 50%;
}
.fa:hover {
opacity: 1;
}
</style>
</head>
<body>
<div id="slider">
<ul class="slidewrapper" data-current="0">
<li class="slide"><img class="img-responsive" src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
<li class="slide"><img class="img-responsive" src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
<li class="slide"><img class="img-responsive" src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
</ul>
<a href="javascript: void(0)" id="prev_slide" class="arrows"><i class="fa fa-arrow-circle-left"></i></a>
<a href="javascript: void(0)" id="next_slide" class="arrows"><i class="fa fa-arrow-circle-right"></i></a>
<img src="img/cl_fix.png" alt="clear" class="clearfix">
</div>
</body>
</html>
Ни наю, поправил на коленке ... |
Deff спасибо, но слайдер все равно не резиновый он как каартинки должен уменьшаться, эм а без скрипта не обойтись, я хотел сделать резиновый слайдер без скриптов вообще?
|
Cdelphi78,
Вы пробовали ужать окно браузера с моими правками ? |
конечно я и говорю слайдер не стал резиновым, посмотрите как он должен работать при уменьшениии у меня в коде!
|
Cdelphi78,
Ну подправил ыщо |
| Часовой пояс GMT +3, время: 23:07. |
|