<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="slider"><!-- The slider -->
<div><!-- A mandatory div used by the slider -->
<!-- Each div below is considered a slide -->
<div>
<div class="row">
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
<div class="col-sm-12 item-fecha">
<h1>Mayo 15</h1>
<p class="desc-evento">Presentación "Características de un Rector y habilidades para el Siglo XXI".(Santillana 2017)</p>
<p class="lugar-evento">Ciudad Jardin, Valle del Cauca</p>
</div>
</div>
</div>
</div>
</div>
<button id="go-left">«</button> <button id="go-right">»</button>
.item-fecha h1{
color: #122454;
font-size:36px;
}
.item-fecha .desc-evento{
color:gray;
font-size:11px;
}
.item-fecha .lugar-evento{
color: #112751;
font-weight: bolder;
font-size:11px;
}
div {
/*color: #000;
font-size: 30px;
line-height: 1.5em;
font-weight: bold;*/
}
/*
.slider {
border: 3px solid #000;
}*/
$(function () {
/*
* jQuery Do It Yourself Slider
* http://pioul.fr/jquery-diyslider/
*
* Copyright 2012, Philippe Masset
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function(e){e.fn.diyslider=function(t){var n=e(this);if(typeof t=="object"||!t){var r={options:e.extend({},{width:"500px",height:"300px",animationAxis:"x",animationDuration:1e3,animationEasing:"swing",loop:!0,display:1,start:1},t),slider:n,slidesContainer:n.children("div:first"),slides:n.children("div:first").children("div"),slidesCount:0,currentSlide:1,dimensions:{w:0,h:0},move:function(t){var n=t[0],r=t[1]||!1,i=parseInt(n,10)==n?parseInt(n,10):n=="forth"?this.currentSlide+1:n=="back"?this.currentSlide-1:!1;this.options.loop&&i!==!1&&i>this.slidesCount-(this.options.display-1)&&(i=1),this.options.loop&&i!==!1&&i<=0&&(i=this.slidesCount-(this.options.display-1));if(i!==!1&&i>0&&i<=this.slidesCount-(this.options.display-1)&&i!=this.currentSlide){var s=e(this.slides[this.currentSlide-1]);this.currentSlide=i,s.removeClass("active").addClass("last-active");var o=e(this.slides[i-1]).addClass("next-active"),u=e.proxy(function(){s.removeClass("last-active"),o.removeClass("next-active").addClass("active"),this.slider.trigger("moved.diyslider",[o,i,!0])},this);this.slider.trigger("moving.diyslider",[o,i,!0]),r?(this.slidesContainer.css(this.getSlidesContainerPosition()),u()):this.slidesContainer.animate(this.getSlidesContainerPosition(),{queue:!1,duration:this.options.animationDuration,easing:this.options.animationEasing,complete:u})}else i==this.currentSlide&&(this.slider.trigger("moving.diyslider",[e(this.slides[i-1]),i,!1]),this.slider.trigger("moved.diyslider",[e(this.slides[i-1]),i,!1]))},resize:function(t){var r=t[0],i=t[1];return this.dimensions.w=r,this.dimensions.h=i,this.slider.css({width:this.dimensions.w,height:this.dimensions.h}),this.slidesContainer.css(e.extend(this.getSlidesContainerPosition(),{width:this.options.animationAxis=="x"?Math.ceil(parseInt(this.dimensions.w,10)*this.slidesCount)+"px":"auto",height:this.options.animationAxis=="y"?Math.ceil(parseInt(this.dimensions.h,10)*this.slidesCount)+"px":"auto"})),this.slides.css({width:this.options.animationAxis=="x"?Math.ceil(parseInt(this.dimensions.w,10)/this.options.display)+"px":this.dimensions.w,height:this.options.animationAxis=="y"?Math.ceil(parseInt(this.dimensions.h,10)/this.options.display)+"px":this.dimensions.h}),this.slider.trigger("resized.diyslider",[this.dimensions]),n},updateOptions:function(t){var r=t[0],i=!1;return e.each(r,e.proxy(function(e,t){if(this.options.hasOwnProperty(e)&&this.options[e]!=t){this.options[e]=t;if(e=="width"||e=="height"||e=="animationAxis"||e=="display")i=!0}},this)),i&&this.resize([this.options.width,this.options.height]),n},setStyles:function(){this.slider.css({position:"relative",overflow:"hidden"}),this.slidesContainer.css({position:"absolute",top:0,left:0}),this.slides.css({"float":"left",overflow:"hidden","box-sizing":"border-box"})},getSlidesCount:function(){return this.slidesCount},getSlidesContainerPosition:function(){return{left:this.options.animationAxis=="x"?"-"+Math.ceil((this.currentSlide-1)*parseInt(this.dimensions.w,10)/this.options.display)+"px":0,top:this.options.animationAxis=="y"?"-"+Math.ceil((this.currentSlide-1)*parseInt(this.dimensions.h,10)/this.options.display)+"px":0}}};return r.slidesCount=r.slides.length,r.slidesCount?e(r.slides[0]).addClass("active"):typeof console!="undefined"&&console.warn("No slides found for DIYslider"),r.setStyles(),r.resize([r.options.width,r.options.height]),r.move([r.options.start,!0]),r.slider.data("diyslider",r),n}if(typeof n.data("diyslider")[t]=="function")return n.data("diyslider")[t](Array.prototype.slice.call(arguments,1))}})(jQuery)
$(".slider").diyslider({
width: "160px", // width of the slider
height: "426px", // height of the slider
animationDuration: 300,
display: 1, // number of slides you want it to display at once
loop: true // disable looping on slides
}); // this is all you need!
// use buttons to change slide
$("#go-left").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "forth");
});
});