Q:

img слайдер в java script

Всем привет! 
Пишу код для слайда в определённом диве. 
Не получается заменить картину. В чём может быть проблема в данном коде ? 

Попробувал 3 варианта и не работают, в чём может быть проблема ? Я не получаю никаких ошибок в консоле и в IDE! 

var images = [

        "BackgroundSlideImages/italy-1587287.jpg",
        "BackgroundSlideImages/stream-1149882_1920.jpg",
        "BackgroundSlideImages/thimble-1597514_1920.jpg",
        "BackgroundSlideImages/mountain-1543308.jpg",
        "BackgroundSlideImages/maligne-river-1485060_1920.jpg",
        "BackgroundSlideImages/camping-1289930_1920.jpg",
        "BackgroundSlideImages/beach-1092734_1920.jpg",
        "BackgroundSlideImages/malaysia-911580.jpg",
        "BackgroundSlideImages/night-839807.jpg",
        "BackgroundSlideImages/sunset-1373171.jpg",

        "BackgroundSlideImages/cycling-1533265_1920.jpg",
        "BackgroundSlideImages/swim-422546_1920.jpg",
        "BackgroundSlideImages/sea-79606_1920.jpg",
        "BackgroundSlideImages/paragliding-1219999_1280.jpg",
        "BackgroundSlideImages/ski-247787_1920.jpg",
        "BackgroundSlideImages/snowboarder-1261844_1920.jpg",
        "BackgroundSlideImages/water-fight-442257_1920.jpg",
        "BackgroundSlideImages/family-591581_1920.jpg",
        "BackgroundSlideImages/pregnant-422982_1920.jpg"
    ];

var imageCounter = 0;

var element = $("<img src="+images[imageCounter]>+">");

var image = $(".content");
image.append(element);

setInterval(function () {

    var img = imageCounter++;

    image.fadeOut(1000,function () {

        $("img").attr("src",images[img]);
        image.fadeIn(1000);

    });

    if (img == images.length){

        img = 0 ;
        $("img").attr("src",images[img]);
    }

},10000); // Не работает, что можно сделать по другому ?

=================================================================
var imageCounter = 0;

//var element = $("<img src="+images[imageCounter]>+">");

var image = $("#img-page");
   // var image = $(".content");
//image.append(element);

setInterval(function () {

    var img = imageCounter++;

    image.fadeOut(1000,function () {

        image.src = images[img];
        image.fadeIn(1000);

    });

    if (img == images.length){

        img = 0 ;
        image.src = images[img];
    }

},10000); //Этот тоже не работает!

=======================================================================
var imageCounter = 0;

var element = $("<img src="+images[imageCounter]>+">");
var image = $(".content");
image.append(element);

setInterval(function () {

    var img = imageCounter++;

    image.fadeOut(1000,function () {

        element.src = images[img];
        image.fadeIn(1000);

    });

    if (img == images.length){

        img = 0 ;
        element.src = images[img];
    }

},10000); // Этот вариант тоже не работет! 
======================================================================= 
.content{

    border: solid;
    color: brown;
    min-width: 100%;
    max-width: 100%;
}

.content > img {

width: 99%;
max-width: 99%;
min-width: 99%;
min-height: 775px;
max-height: 775px;

}
 <div class="content">

 тут должна быть картина, элемент создаю динамически  

     <div class="home-content" id = "home-page">

        Home

     </div>
   
   </div>

A:

Так делать не правельно, но....

var images = [


  "http://www.evilbeetgossip.com/wp-content/uploads/2010/08/ladygaga_i-d.jpg",
  "http://www.evilbeetgossip.com/wp-content/uploads/2010/08/gaga_id_11.jpg",
  "http://www.evilbeetgossip.com/wp-content/uploads/2010/08/gagaid.jpg",
  "http://www.evilbeetgossip.com/wp-content/uploads/2010/08/gaga_id_10.jpg"
];

var imageCounter = 0;

var element = $("<img src=" + images[imageCounter] + ">");
var image = $(".content");
image.append(element);

setInterval(function() {
  imageCounter++;
  image.fadeOut(500, function() {
    $("img").attr("src", images[imageCounter]);
    image.fadeIn(500);
  });
  if (imageCounter == images.length) {
    imageCounter = 0;
   image.fadeOut(500, function() {
    $("img").attr("src", images[imageCounter]);
    image.fadeIn(500);
  });
  }
}, 1500);
.content {
  border: solid;
  color: brown;
  
  max-width: 300px;
}

img{
 max-width: 300px;
max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">

 

  <div class="home-content" id="home-page">

   

  </div>

</div>

