изображения карусельного слайдера не скользящие

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

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

У меня есть текущий Ajax/jquery от Google. Он должен быть способен скользить. Не уверен, что случилось.

Живой пример: http://codepen.io/riwakawebsitedesigns/pen/CEgdm

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link rel="stylesheet" href="css/responsive.css" media="screen" type="text/css" media="all" /> 
    <link rel="stylesheet" href="css/carousel.css" media="screen" type="text/css" media="all" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
      $(".carousel #1").show("fade", 500); 
      $(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500); 

      var sc = $(".carousel img").size(); 
      var count = 2; 

      setInterval(function() { 
       $(".carousel #"+count).show("slide",function(){direction: 'right', 500}); 
       $(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500); 

       if (count == sc) { 
        count = 1; 
       } else { 
        count = count + 1 
       } 
      }, 1700); 
     }) 
    </script> 
</head> 
<body> 

<div class="container"> 
    <div class="row"> 
     <div class="span12"> 
      <div class="carousel"> 
       <img id="1" class="active" src="images/image1.jpg" border="0" alt="" /> 
       <img id="2" src="images/image2.jpg" border="0" alt="" /> 
       <img id="3" src="images/image3.jpg" border="0" alt="" /> 
      </div> 
     </div> 
    </div> 
</div><!-- . Container --> 

</body> 
</html>

Slider CSS

.carousel { 
    width: 100%; 
    height: 350px; 
    overflow: hidden; 
    background-image: url('../images/loading.gif'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

.carousel img { 
    width: 100%; 
    height: 350px; 
    display: none; 
}

источник

2014-09-30 Anonymous

Пара пунктов: ** (1) ** ID должен начинаться с буквы, так что, например, используйте 'slide1', а не только' 1'. ** (2) ** Используйте '.length' вместо' .size() ', последний устарел. ** (3) ** Насколько я знаю, '.show()' и 'hide()' не принимают такие аргументы, как '' fade "или' "slide" и 'direction: right'. Используйте что-то вроде '.animate ({width: 500}, 75)', это заставит изображение расти с '0' до' [final width] '. – myfunkyside

Я считаю, что проблема связана с этой строки кода:

$(".carousel #"+count).show("slide",function(){direction: 'right', 500});

Вы фактически возвращающей ссылку на функцию вместо объекта там, я думаю, что правильная линия должна быть:

$(".carousel #"+count).show("slide",{direction: 'right'}, 500);

Тем не менее, я бы просто использовал jQuery.animate() вместо этого и, возможно, совсем другой подход. Проверьте обновленный код, я сделал некоторые улучшения тоже:

$(document).ready(function() { 
    var images = $(".carousel img"); 
    var timeout = 5000; // 5 seconds 
    var max = images.length; 

    var slide = function(index) { 
     var img = $(images[index]); 

     // first show the image  
     img.animate({left: "0"}, 500, function() { 

      // specify timeout to change image 
      setTimeout(function() { 
       // hide current image 
       img.animate({left: "100%"}, 500, function() {     
        // reset state to start over 
        img.css("left" , "-100%"); 
       }); 
       if (++index == max) { 
        index = 0; // start over 
       } 
       // recursive call 
       slide(index); 
      }, timeout);   
     });   
    }; 

    slide(0); 
});

я тоже изменил этот CSS правила:

.caoursel { 
    position: relative; 
} 

.carousel img { 
    position: absolute; 
    width: 100%; 
    height: 350px; 
    left: -100%; 
}

Живая демонстрация: http://codepen.io/riwakawebsitedesigns/pen/CEgdm

Я рекомендую использовать некоторую карусель третьей стороны, как и карусель Bootstrap:

источник

2014-09-30 02:32:37 emerino

Я пробовал bootstrap 3, но теперь решаюсь сам по себе, потому что натолкнулся на некоторые конфликты раньше с там js. – 2014-09-30 03:01:27

Я пробовал, но позиция: абсолютная; на изображении не держит его в с span12. Изображения теперь имеют полную ширину страницы. – 2014-09-30 03:08:57

Вы также должны добавить позицию: относительно div.carousel, которая сделает их соответствующими ширине .span12 (обновленный ответ) – emerino

изображения карусельного слайдера не скользящие

ответ

Смежные вопросы