Форум

Cdelphi78 · #1 (**permalink**) 21.12.2015, 10:19

Здравствуйте! Значит в сладере заадаптивил каритинки они теперь резиновые, но проблема в том что слайдер при этом остался статичным, то есть подключаю скрипт слайдера вся резиновость картинок пропадает, при уменьшении страницы картинки не уменьшаются, прямо не знаю что делать, никаких зацепок нет?

<!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

Cdelphi78,
в чём резиновость то если при изменении окна li не меняют свой размер, а картинки согласно вашему css занимают всю ширину li

Cdelphi78 · #3 (**permalink**) 21.12.2015, 10:53

ААА, отключите скрипт, не отключил.посмотрите, у меня работает.

рони · #4 (**permalink**) 21.12.2015, 11:00

Сообщение от Cdelphi78

ААА, отключите скрипт, не отключил.посмотрите, у меня работает.

не осилил

Cdelphi78 · #5 (**permalink**) 21.12.2015, 11:33

Вот, посмотрите, сейчас картинки резиновые, подключаю скрипт начинаются проблемы с резиной.

<!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>

Deff · #6 (**permalink**) 21.12.2015, 12:00

<!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>

Ни наю, поправил на коленке ...

Cdelphi78 · #7 (**permalink**) 21.12.2015, 12:14

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

Deff · #8 (**permalink**) 21.12.2015, 12:36

Cdelphi78,
Вы пробовали ужать окно браузера с моими правками ?

Cdelphi78 · #9 (**permalink**) 21.12.2015, 16:28

конечно я и говорю слайдер не стал резиновым, посмотрите как он должен работать при уменьшениии у меня в коде!

Deff · #10 (**permalink**) 21.12.2015, 20:58

Cdelphi78,
Ну подправил ыщо

Форум

Справочник

Discord чат

Курсы javascript