En este link [url=https://codepen.io/anon/pen/JyeEdj][/url] 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!!
