Слайдер не резиновый
Здравствуйте! Значит в сладере заадаптивил каритинки они теперь резиновые, но проблема в том что слайдер при этом остался статичным, то есть подключаю скрипт слайдера вся резиновость картинок пропадает, при уменьшении страницы картинки не уменьшаются, прямо не знаю что делать, никаких зацепок нет?
<!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,
Ну подправил ыщо |
Уже лучше, но все равно нето вот посмотрите как здесь работает слайдер http://flexslider.woothemes.com/ он полностью резиновый)
А и кто му же он опять забаговался:) , работает не поими как? |
Самое интересное что в сети ни одного толкогвого урока по резине слайда
|
Cdelphi78,
Ну нун отслеживать window.onresize для правки длины перемещений контента и размера слайдера. http://freeams.ru/lessons/lessons-co...ry-i-css3.html http://bxslider.com/examples/thumbnail-pager-1 Как-то Вы плохо ищите http://www.internet-technologies.ru/...icle_2279.html http://qps.ru/FHQMq |
http://freeams.ru/lessons/lessons-co...ry-i-css3.html этот посмострю, че то ничего не понимаю, какой onresize? там же transition3d работает?
http://bxslider.com/examples/thumbnail-pager-1 здесь ниче непонятно http://www.internet-technologies.ru/...icle_2279.html это обзоры слайдов мне нужен урок по адаптивности слайдеров http://qps.ru/FHQMq ссылка на вирус:) |
А на чистом css можно зарезинить слайдер?
|
http://freeams.ru/lessons/lessons-co...ry-i-css3.html ну здесь он готовый подклюяает слайдер я же искал как сделать полностью кастомный резиновый слайдер)
|
Вот это не понятно зачем он делает >Идем далее: исключаем показ слайдов изображений которые находятся вне основной области просмотра,
|
а вот это еще что такое не понятно
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
|
Цитата:
Тоже самое, без ужатий https://www.google.ru/search?q=%D0%B...45.46YTrAn7GYk |
а ха ха, а скрипт он так и не разобрал что делает каждая строчка:)
|
Deff, ну вот сейчас ссылка заработала,но дело не в этом я искал уже в гугле , там везде идут обзоры готовых решений, купите то купите это, мне то другое нужно, мне урок по резиновости слайдера нужен что нужно для этого)
|
Cdelphi78,
Я за два последних года не смог чего нибудь не найти, по любым вопросам скриптодеятельности. Задавайте правильно Вопросы поисковикам, Пробуйте, переформулируйте, ищите и на англоязычных ресурсах. Уж слайдеров и уроков по ним - тьма тьмущая. Хотя при попытке напрячься и понять, что я вам пояснил про window.onresize или $(window).resize в JQ уже можно сделать всё самому! Что меняется при смене размеров окна ? 1. Ширина -высота слайдера [1] 2. Длина пути прохода картинки [2] ========================= 1. Запуск.(Инициализация) Считываем Высоту - ширину окна браузера - если она не менее установленной в css начальной ширины - оставляем всё как есть 2. Если меньше - Редактируем [1] и [2] , останавливаем и перезапускаем слайдер ========================= При событии $(window).resize проводим повторную Инициализацию |
Спасибо за информацию, попробую разобраться, все может ответите на вопрос как сделать на чистом css это все не сторонник подключать скрипты вообще)
|
Cdelphi78,
Должен быть уже скрипт слайдера учитывающий резиновость, Ибо путь прохода картинки слайдер вычисляет для конкретной ширины слайдера, и при смене ширины нун его переинициализировать |
Да я говорю, без скриптов вообще можно сделать?
|
Можно, Поищите слайдер на чистом css
Есть вариант слайдера без передвижений, тады мон резиновость делать css http://javascript.ru/forum/jquery/29...-slajjder.html (Там картинка рамки испортилась ... |
|
Не. Открыл я скрипт flexslidera и не понимаю в нем ни строчки чего куда?, буду свой пытаться доделать.
|
Кто нибуть может мне обьяснить как работает этот скрипт? Почему слайдер лихорадит так в адаптиве?
<script>
008
009
var slideWidth,
010
sliderTimer,
011
currentSlide = 0,
012
len;
013
014
function StarT () {
015
if($(window).width()>980) slideWidth = 980;
016
else slideWidth = parseInt($(window).width());// alert(slideWidth);
017
018
019
function nextSlide() {
020
currentSlide++;
021
if (currentSlide >= len) currentSlide = 0;
022
$(".slidewrapper").animate({
023
left: -currentSlide * slideWidth
024
}, 800)
025
}
026
027
function prevSlide() {
028
currentSlide--;
029
if (currentSlide < 0) currentSlide = len - 1;
030
$(".slidewrapper").animate({
031
left: -currentSlide * slideWidth
032
}, 800)
033
}
034
$(function() {
035
$('#slider').css({'max-width':slideWidth+'px','height':''+parseInt(.307*slideWidth)+'px'});
036
037
len = $(".slidewrapper").children().length
038
$(".slidewrapper").width(len * slideWidth);
039
sliderTimer = setInterval(nextSlide, 3000);
040
$("#slider").on({
041
mouseenter: function() {
042
clearInterval(sliderTimer)
043
},
044
mouseleave: function() {
045
sliderTimer = setInterval(nextSlide, 3000)
046
}
047
});
048
$("#next_slide").click(function(event) {
049
event.preventDefault();
050
clearInterval(sliderTimer);
051
nextSlide()
052
});
053
$("#prev_slide").click(function(event) {
054
event.preventDefault();
055
clearInterval(sliderTimer);
056
prevSlide()
057
})
058
});
059
060
}; StarT ();
061
var timID2;
062
$(window).resize(function() {
063
if($(window).width()>=980) return;
064
//Тут коды переинициализации;
065
clearTimeout(timID2);
066
clearInterval(sliderTimer);
067
$(".slidewrapper").stop(true);
068
$(".slidewrapper").css({'left':0})
069
timID2 = setTimeout(function(){StarT()},700);
070
});
071
</script>
|
Что такое parseInt?
|
Ни одного нормального урока по разбору скриптов слайдера:cray:
Напишут: "для работы слайдера нужен вот такой скрипт.Спасибо за внимание!" А разбирать каждую строчку кто будет? |
ооооооооооооооо, алле, может кто за недорого хоть поможет с этим скриптом?
|
Цитата:
http://javascript.ru/parseint В данном случае отбрасывает дробную часть от деления чисел, оставляя ток целую Не все браузеры переваривают ширину с дробью, ибо число пиксел на экране -целое |
Вот так вот понял а то в этом учебнике так написано что не понятно,
Далее вот здесь не понятно у нас currentslide равен 0 потом увеличивается на единицу потом почему то если currentslide >= переменной len(где len не задано значение) то currentslide опять сбрасывать в ноль, потом анимируем позицию смещаем влево на значение минус currentslide почему то умноженное на ширинку сладера а ище 800 там зачем то в конце. |
никто не хочет помогать, тогда закрываем тему. на биржу выложу проект тогда)
|
Дурацкий слайдер, дико бесит меня, чуть тронешь, начинает носиться как угорелый:-/
|
| Часовой пояс GMT +3, время: 03:21. |