image slider 4

by bvotcode

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
/**
 * jQuery bxSlider v3.0
 * http://bxslider.com
 *
 * Copyright 2010, Steven Wanderski
 * http://bxcreative.com
 *
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 */
(function(a){a.fn.bxSlider=function(b){function Z(b,c,d,e){var f=[];var g=d;var h=false;if(e=="backward"){b=a.makeArray(b);b.reverse()}while(g>0){a.each(b,function(b,d){if(g>0){if(!h){if(b==c){h=true;f.push(a(this).clone());g--}}else{f.push(a(this).clone());g--}}else{return false}})}return f}function Y(){var a=i.outerHeight()*b.displaySlideQty;return a}function X(){var a=i.outerWidth()*b.displaySlideQty;return a}function W(b,c){if(c=="left"){var d=a(".pager",h).eq(b).position().left}else if(c=="top"){var d=a(".pager",h).eq(b).position().top}return d}function V(){if(!b.infiniteLoop&&b.hideControlOnEnd){if(x==F){a(".bx-prev",h).hide()}else{a(".bx-prev",h).show()}if(x==G){a(".bx-next",h).hide()}else{a(".bx-next",h).show()}}}function U(c,e,f,g){p=a('<a href="" class="bx-start"></a>');if(c=="text"){r=e}else{r='<img src="source/'+e+'" />'}if(f=="text"){s=g}else{s='<img src="source/'+g+'" />'}if(b.autoControlsSelector){a(b.autoControlsSelector).append(p)}else{h.append('<div class="bx-auto"></div>');a(".bx-auto",h).html(p)}p.click(function(){if(b.ticker){if(a(this).hasClass("stop")){d.stopTicker()}else if(a(this).hasClass("start")){d.startTicker()}}else{if(a(this).hasClass("stop")){d.stopShow(true)}else if(a(this).hasClass("start")){d.startShow(true)}}return false})}function T(){var c=a("img",g.eq(x)).attr("title");if(c!=""){if(b.captionsSelector){a(b.captionsSelector).html(c)}else{a(".bx-captions",h).html(c)}}else{if(b.captionsSelector){a(b.captionsSelector).html("� ")}else{a(".bx-captions",h).html("� ")}}}function S(c){var...

CSS

#slider {
	list-style:none;
	padding:0px
}

.slider-container { 
	background:#222; 
	width:845px; 
	height:150px; 
	padding:20px; 
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px; 
}

#slider img { 
	width:200px; 
	height:125px; 
	margin:0px; 
	display:inline-block  
}

#slider li {
	width:210px
}

JavaScript

$(function() {

  var unformatted = {
    "headers": ["Image"],
    "rows": [
      ["http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg"],
      ["http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg"]
    ]
  };
  var data = [];

  for (var i = 0; i < unformatted.rows.length; i++) {
    var row = unformatted.rows[i];

    data.push({
      Image: row[0]
    });
  }
  var tt = $('<ul id="slider">');;
  $.each(data, function(key, val) {
    tt.append('<li><a href="#"><img src="' + val.Image + '"/></a></li>');
    $(".slider-container").append(tt);
  });

});

$(document).ready(function() {
  $('#slider').bxSlider({
    ticker: true,
    tickerSpeed: 2000,
    tickerHover: true
  });
});