I'm trying to use jquery to hide the opacity of the first 3 products by clicking the left arrow and then I want the next 3 products to fade into view. I can get the first 3 to fade out without moving the arrows by hiding opacity. So when they are invisible the products will change and then I will fade into view the next 3 products. I can't seem to figure out how to change out the first 3 images on click with the next 3 images in the products object from app.js. Can anyone help me with this
<https://lh3.googleusercontent.com/-f7AlLfAUBxw/V4ELj0P6w9I/AAAAAAAAAy0/He4k9u6NkaY81YHJo2h4BM8fBuJJKrtRwCLcB/s1600/pic.png> HTML <!DOCTYPE html> <html ng-app='formApp'> <head> <title>Bicycle App</title> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link href="app.css" rel="stylesheet"> </head> <body> <div class="header"> <div class="container"> <div class='row'> <div class='col-md-12'> <i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <!-- end class not needed --> <div class="chooseTitle"> Choose Your Bicycle </div> </div> </div> <!-- you missed md from offset, end class not needed --> <div class="products" ng-controller="BikeController"> <div class="row"> <div class="col-md-1" id="leftArrow"><a ng-href="#"><img ng-src="images/leftarrow.png" class="img-responsive"></a></div> <div class="bikesandtitles"> <div id="bikeTitle" class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3"> {{product.manufacturer}} <img id="bikePic" ng-src="{{product.image}}"> </div> </div> <div class="col-md-1" id="rightArrow"><a ng-href="#"><img ng-src="images/rightarrow.png" class="img-responsive"></a></div> </div> </div><!--End controller--> </div> <script src="bower_components/angular/angular.js"></script> <script src="app.js"></script> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bikeimageslider.js"></script> </body> </html> bikeimageslider.js $( document ).ready(function() { $('#leftArrow').click(function (event) { event.preventDefault(); $('.bikesandtitles').fadeTo(800, 0); }); }); app.js var app = angular.module('formApp', []); app.controller('BikeController',['$scope', function($scope){ $scope.products = [ { manufacturer: "Trek", image: 'images/bike1.jpg' }, { manufacturer: "Mongoose", image: 'images/bike2.jpg' }, { manufacturer: "Portlandia", image: 'images/bike3.jpg' }, { manufacturer: "Giant", image: 'images/bike4.jpg' }, { manufacturer: "Framed", image: 'images/bike5.jpg' }, { manufacturer: "Windsor", image: 'images/bike6.jpg' } ]; this.form = {}; this.addForm = function(product){ }; }]); [1]: http://i.stack.imgur.com/Smhbf.png -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
