Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Слайдер не резиновый (https://javascript.ru/forum/events/60278-slajjder-ne-rezinovyjj.html)

Cdelphi78 23.12.2015 14:31

Deff, ну вот сейчас ссылка заработала,но дело не в этом я искал уже в гугле , там везде идут обзоры готовых решений, купите то купите это, мне то другое нужно, мне урок по резиновости слайдера нужен что нужно для этого)

Deff 23.12.2015 14:41

Cdelphi78,
Я за два последних года не смог чего нибудь не найти, по любым вопросам скриптодеятельности. Задавайте правильно Вопросы поисковикам,
Пробуйте, переформулируйте, ищите и на англоязычных ресурсах. Уж слайдеров и уроков по ним - тьма тьмущая. Хотя при попытке напрячься и понять, что я вам пояснил про window.onresize или $(window).resize в JQ уже можно сделать всё самому!
Что меняется при смене размеров окна ?
1. Ширина -высота слайдера [1]
2. Длина пути прохода картинки [2]
=========================
1. Запуск.(Инициализация) Считываем Высоту - ширину окна браузера - если она не менее установленной в css начальной ширины - оставляем всё как есть
2. Если меньше - Редактируем [1] и [2] , останавливаем и перезапускаем слайдер
=========================
При событии $(window).resize проводим повторную Инициализацию

Cdelphi78 23.12.2015 14:59

Спасибо за информацию, попробую разобраться, все может ответите на вопрос как сделать на чистом css это все не сторонник подключать скрипты вообще)

Deff 23.12.2015 15:05

Cdelphi78,
Должен быть уже скрипт слайдера учитывающий резиновость,
Ибо путь прохода картинки слайдер вычисляет для конкретной ширины слайдера, и при смене ширины нун его переинициализировать

Cdelphi78 23.12.2015 15:13

Да я говорю, без скриптов вообще можно сделать?

Deff 23.12.2015 15:15

Можно, Поищите слайдер на чистом css
Есть вариант слайдера без передвижений, тады мон резиновость делать css http://javascript.ru/forum/jquery/29...-slajjder.html
(Там картинка рамки испортилась ...

Cdelphi78 23.12.2015 15:30

Deff, что то седня лень вообще думать может быть соберусь как нибуть да разберусь с этими слайдерами всеми,:D

Cdelphi78 24.12.2015 09:33

Не. Открыл я скрипт flexslidera и не понимаю в нем ни строчки чего куда?, буду свой пытаться доделать.

Cdelphi78 24.12.2015 09:44

Кто нибуть может мне обьяснить как работает этот скрипт? Почему слайдер лихорадит так в адаптиве?
<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>

Cdelphi78 24.12.2015 09:48

Что такое parseInt?


Часовой пояс GMT +3, время: 03:12.