Hola a todos, soy nuevo en este tema así que agradecería mucho su ayuda.

En este link https://codepen.io/anon/pen/JyeEdj se puede ver un slide de imágenes (la idea es poner logos ahí) pero en ese ejemplo está separado css. javascript. y html. intenté unirlo de esta manera


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">

*, *:before, *:after {
box-sizing: border-box;
}

$bg-color: #d9d8c6;
$primary-color: #5b5a5c;
$secondary-color: darken($primary-color, 15%);

body {
background: $bg-color;
}

li {
list-style: none;
}

.suga-container {
background: $primary-color;
padding: .2em;
max-width: 570px;
margin: 5em auto;
box-shadow: 3px 3px 0px $secondary-color;
border: 2px solid $secondary-color;
border-radius: 5px;
}

.suga-slider-wrap {
overflow: hidden;
margin: 1em;
}


.suga-slider-group {
&:before,
&:after {
content: " ";
display: table;
}

&:after {
clear: both;
}
}

.suga-slide {
float: left;
position: relative;
margin-left: 0;
padding-right: 8px;
}

</style>

<script>
$.fn.suga = function(options) {
var settings = $.extend({
'transitionSpeed': 3000,
'snap': false
}, options);

var $this = $(this);

// add plugin specific classes
$this.addClass('suga-slider-wrap');
$this.children('ul').addClass('suga-slider-group');
$this.find('li').addClass('suga-slide');

// caching $$$
var $slide = $('.suga-slide'),
$firstEl = $('.suga-slide:first'),
$group = $('.suga-slider-group'),
$wrap = $('.suga-slider-wrap');

var slideWidth = $slide.outerWidth(),
slideHeight = $('.suga-slide').height(),
slideCount = $slide.length,
totalWidth = slideWidth * slideCount;

// set width on group element
$group.width(totalWidth);
$wrap.height(slideHeight);
$wrap.wrap('<div class="suga-container"></div>');

// add first class at start
if (!$group.find($firstEl).hasClass("suga-first")) {
$group.find($firstEl).addClass("suga-first");
}

// lets move baby
var transitionSnap = function() {
var $firstEl = $group.find('.suga-first').html();

$group.find('.suga-first').animate({
'margin-left': '-' + slideWidth + 'px'
}, function(){
$group.append('<li class="suga-slide">' + $firstEl + '</li>');
$(this).remove();
$group.find('li:first').addClass("suga-first");

});
};

var transitionScroll = function() {
var $firstEl = $group.find('.suga-first').html();

$group.find('.suga-first').animate({
'margin-left': '-' + slideWidth + 'px'
}, settings.transitionSpeed, 'linear', function(){
$group.append('<li class="suga-slide">' + $firstEl + '</li>');
$(this).remove();
$group.find('li:first').addClass("suga-first");
transitionScroll();
});
};

if (settings.snap) {
window.setInterval(transitionSnap, settings.transitionSpeed);
} else {
transitionScroll();
}
}


$(window).load(function(){
$('#logos').suga({
'transitionSpeed': 2000,
'snap': true
});
});

</script>
</head>

<body>
<div id="logos">
<ul>
<li><img src="http://placehold.it/100x100" /></li>
<li><img src="http://placehold.it/100x100" /></li>
<li><img src="http://placehold.it/100x100" /></li>
<li><img src="http://placehold.it/100x100" /></li>
<li><img src="http://placehold.it/100x100" /></li>
<li><img src="http://placehold.it/100x100" /></li>
</ul>
</div>
</body>
</html>

pero me sale una sola lista estática hacia abajo así:



como podría solucionar esto y que me funcione el slide poniendo en un sólo html todo el código? gracias!!