Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2015, 10:19
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

Слайдер не резиновый
Здравствуйте! Значит в сладере заадаптивил каритинки они теперь резиновые, но проблема в том что слайдер при этом остался статичным, то есть подключаю скрипт слайдера вся резиновость картинок пропадает, при уменьшении страницы картинки не уменьшаются, прямо не знаю что делать, никаких зацепок нет?
<!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>
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2015, 10:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Cdelphi78,
в чём резиновость то если при изменении окна li не меняют свой размер, а картинки согласно вашему css занимают всю ширину li
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2015, 10:53
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

ААА, отключите скрипт, не отключил.посмотрите, у меня работает.
Ответить с цитированием
  #4 (permalink)  
Старый 21.12.2015, 11:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от Cdelphi78
ААА, отключите скрипт, не отключил.посмотрите, у меня работает.
не осилил
Ответить с цитированием
  #5 (permalink)  
Старый 21.12.2015, 11:33
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

Вот, посмотрите, сейчас картинки резиновые, подключаю скрипт начинаются проблемы с резиной.
<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 21.12.2015, 12:00
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!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, 21.12.2015 в 20:57.
Ответить с цитированием
  #7 (permalink)  
Старый 21.12.2015, 12:14
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

Deff спасибо, но слайдер все равно не резиновый он как каартинки должен уменьшаться, эм а без скрипта не обойтись, я хотел сделать резиновый слайдер без скриптов вообще?
Ответить с цитированием
  #8 (permalink)  
Старый 21.12.2015, 12:36
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Cdelphi78,
Вы пробовали ужать окно браузера с моими правками ?
Ответить с цитированием
  #9 (permalink)  
Старый 21.12.2015, 16:28
Кандидат Javascript-наук
Отправить личное сообщение для Cdelphi78 Посмотреть профиль Найти все сообщения от Cdelphi78
 
Регистрация: 30.11.2015
Сообщений: 117

конечно я и говорю слайдер не стал резиновым, посмотрите как он должен работать при уменьшениии у меня в коде!
Ответить с цитированием
  #10 (permalink)  
Старый 21.12.2015, 20:58
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Cdelphi78,
Ну подправил ыщо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
есть ли резиновый слайдер контента на jQuery Enxiro jQuery 10 28.02.2014 12:15
Новостной слайдер на bxslider malsyst Библиотеки/Тулкиты/Фреймворки 3 02.09.2013 10:32
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 22:44
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 20:52
Нужно отредактировать слайдер glavkot Работа 0 22.08.2011 14:14