added the posibility to show image alt next to next/prev buttons
added the posibility to show image alt next to next/prev buttons

--- a/owl.carousel.js
+++ b/owl.carousel.js
@@ -85,6 +85,7 @@
             base.itemsAmount = base.$userItems.length;
             base.wrapItems();
             base.$owlItems = base.$elem.find(".owl-item");
+            base.titles = {};
             base.$owlWrapper = base.$elem.find(".owl-wrapper");
             base.playDirection = "next";
             base.prevItem = 0;
@@ -307,6 +308,7 @@
                 lastItem = base.itemsAmount - base.options.items;
 
             base.$owlItems.each(function (index) {
+                base.titles[index] = $(this).find('img').attr ('alt');
                 var $this = $(this);
                 $this
                     .css({"width": base.itemWidth})
@@ -419,7 +421,15 @@
 
             buttonsWrapper
                 .append(base.buttonPrev)
+                .append( base.userOptions.showTitles ? '<span id="currTitle">'+base.titles[ base.currentItem ]+'</span>' : '' )
                 .append(base.buttonNext);
+
+			if ( base.userOptions.showTitles ) {
+				buttonsWrapper.prepend ( '<span id="prevTitle">'+((base.currentItem > 0) ? base.titles[ (base.currentItem-1) ]  : base.titles[(base.itemsAmount-1)])+'</span>' );
+				buttonsWrapper.append ( '<span id="nextTitle">'+((base.currentItem < base.itemsAmount) ? base.titles[ (base.currentItem+1) ] : '')+'</span>' );
+				$('#prevTitle').click (function(){base.prev()});
+				$('#nextTitle').click (function(){base.next()});
+			}
 
             buttonsWrapper.on("touchstart.owlControls mousedown.owlControls", "div[class^=\"owl\"]", function (event) {
                 event.preventDefault();
@@ -496,6 +506,7 @@
                 return false;
             }
             base.paginationWrapper.find(".owl-page").each(function () {
+            	console.log ( base.currentItem );
                 if ($(this).data("owl-roundPages") === $(base.$owlItems[base.currentItem]).data("owl-roundPages")) {
                     base.paginationWrapper
                         .find(".owl-page")
@@ -548,6 +559,13 @@
             }
         },
 
+        displayTitles : function () {
+        	var base = this;
+        	$('#prevTitle').html( ( (base.currentItem > 0) ? base.titles[ (base.currentItem-1) ]  : base.titles[(base.itemsAmount-1)] ) );
+        	$('#currTitle').html( base.titles[ base.currentItem ] );
+        	$('#nextTitle').html( ( (base.currentItem < (base.itemsAmount-1)) ? base.titles[ (base.currentItem+1) ] : base.titles[0]) );
+        },
+
         next : function (speed) {
             var base = this;
 
@@ -695,6 +713,7 @@
             if (typeof base.options.afterMove === "function" && base.prevItem !== base.currentItem) {
                 base.options.afterMove.apply(this, [base.$elem]);
             }
+            base.displayTitles ();
         },
 
         stop : function () {
@@ -1197,7 +1216,7 @@
                 iterations += 1;
                 if (base.completeImg($lazyImg.get(0)) || isBackgroundImg === true) {
                     showImage();
-                } else if (iterations <= 100) {//if image loads in less than 10 seconds 
+                } else if (iterations <= 100) {//if image loads in less than 10 seconds
                     window.setTimeout(checkLazyImage, 100);
                 } else {
                     showImage();
@@ -1226,7 +1245,7 @@
                 iterations += 1;
                 if (base.completeImg($currentimg.get(0))) {
                     addHeight();
-                } else if (iterations <= 100) { //if image loads in less than 10 seconds 
+                } else if (iterations <= 100) { //if image loads in less than 10 seconds
                     window.setTimeout(checkImage, 100);
                 } else {
                     base.wrapperOuter.css("height", ""); //Else remove height attribute
@@ -1507,6 +1526,8 @@
         afterMove : false,
         afterAction : false,
         startDragging : false,
-        afterLazyLoad: false
+        afterLazyLoad: false,
+
+        showTitles : false
     };
 }(jQuery, window, document));

comments