angularjs image slider

AngularJs de resim listesi olan bir scope nesnesini sliderla ekranda göstermeye çalışalım.

Öncelikle controllerda listemizi oluşturalım. Resimlerimi cloudinaryden alarak oluşturdum




    $scope.imagelist=[{"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059061/oseyxqjbaodjgmu5k6p9.png"}},
                  {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059067/tlkdgflzsr85sk617zz0.png"}},
                  {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059070/pl5x22temtyijbkully1.png"}},
                  {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059075/u4vqibpvkgrtmaxp1mcv.png"}},
                  {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059080/w12woyphq4knc25uamdi.png"}},
                  {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059083/nvt5zkfeessk4opn3xsi.png"}},
                  {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059092/vxcdf4feurptlhsbqoez.png"}]


controllara fonksiyonumuzu yazalım:


öncelikle controlların function kısmına $timeout ekleyelim

sonrasında fonksiyonumuzu yazalım


$scope.isShowSlider=function()
    {
        var slidesInSlideshow =$scope.$root.imagelist.length-1;
        var slidesTimeIntervalInMs = 2000;
       
        $scope.$root.slideshow =0;
        $scope.$root.showimage= $scope.$root.imagelist[$scope.$root.slideshow].image.url;

        var slideTimer =
        $timeout(function interval() {
       
          if( $scope.$root.slideshow!=slidesInSlideshow){
             $scope.$root.slideshow = ($scope.$root.slideshow % slidesInSlideshow) + 1;
             $scope.$root.showimage=$scope.$root.imagelist[$scope.$root.slideshow].image.url;
            slideTimer = $timeout(interval, slidesTimeIntervalInMs);
          }
         
        }, slidesTimeIntervalInMs);
    }


buradaki slideTimer nesnesini iç içe çağırdığımız için listenin içerisinde dönerek her seferinde bir sonraki resmi alıp 2 sn (slidesTimeIntervalInMs) kadar bekleyip diğerine geçiyor. if yapısı eğer listenin sonuna geldiyse durması için. resimlerinizin hiç durmasını istemiyorsanız bu if yapısını kaldırmanız yeterli.

www/css/style.css


.slideshow {
  font-family: "Arial", sans-serif;
  text-align: center;
  position:relative;
  width:600px;
  overflow:hidden;
  background: #1a1a1a;
  margin: 0 auto;
  color: white;
  text-shadow: 1px 1px 1px #000;
  border-radius: .3em;
  margin-top: 30px;
}
.imageslide{
width:600px;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
overflow:hidden;
position:relative;
text-align: center;
}

.imageslide .slider-content {
  position: absolute;
  width:100%;
  height:400px;
 
}

image.html

   <button class="button button-icon " ng-click="isShowSlider()"> Basla

       </button>
     <div  class="imageslide"  ng-animate="'animate'">
          <div class="slider-content" >
            <img src="{{ $root.showimage }}"  height="200" width="200">
          </div>
       

     </div>