Slideshow für Events

by Marius Jopen

HTML

<div class="border"></div>

<div class="container ">

  <div class="future">
    <div id="f2" class="event">
      <div class="event-text" id="ft2">Future EVENT 2</div>
    </div>
    <div id="f1" class="event">
      <div class="event-text" id="ft1">Future EVENT 1</div>
    </div>
  </div>

  <div class="recent">
    <div id="r1" class="event">
      <div class="event-text" id="rt1">Recent EVENT 1</div>
    </div>
  </div>

  <div class="past">
    <div id="p1" class="event">
      <div class="event-text" id="pt1">Past EVENT 1</div>
    </div>
    <div id="p2" class="event">
      <div class="event-text" id="pt2">Past EVENT 2</div>
    </div>
  </div>

</div>

<div class="container-text">
</div>



scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/> scroll
<br/>

CSS

html {
  width: 100%;
  overflow-x: hidden;
}

* {
  padding: 0px;
  margin: 0px;
}

.border {
  position: fixed;
  height: 100%;
  width: 1px;
  background: red;
  left: 200px;
}

.container {
  width: 3000px;
  position: absolute;
  transition: 1s ease;
}

.event {
  width: 200px;
  height: 200px;
  background: pink;
  float: left;
}

.event-text {
  position: absolute;
  display: none;
  top: 300px;
  left: 200px;
}

.active {
  display: block;
}

#r1 {
  background: yellow;
}

.future {
  background: blue;
  float: left;
  width: auto;
  height: 300px;
}

.recent {
  background: orange;
  float: left;
  width: auto;
  height: 300px;
}

.past {
  background: grey;
  float: left;
  width: auto;
  height: 300px;
}

JavaScript

$(function() {

  var eventtext = $(".event-text").detach();
  eventtext.appendTo('.container-text');
  
});


$(function() {

  $('#rt1').addClass('active');
  
});


$(function() {

  var fw = $('.future').width();
  var bw = $('.event').width();

  $(".container").offset({
    left: -fw + bw
  });
  
});


$(".past .event").each(function(i) {

  var i = ++i;
  var idname = $('#p' + i);
  var idnametext = $('#pt' + i);

  $(idname).click(function() {

    var fw = $('.future').width();
    var bw = $('.event').width();
    var bn = i * 200;

    $('.event-text').removeClass('active');
    $(idnametext).addClass('active');

    $(".container").offset({
      left: -fw + bw - bn
    });

  });

});


$('#r1').click(function() {

  var fw = $('.future').width();
  var bw = $('.event').width();

  $('.event-text').removeClass('active');
  $('#rt1').addClass('active');

  $(".container").offset({
    left: -fw + bw
  });
  
});


$(".future .event").each(function(i) {

  var i = ++i;
  var idname = $('#f' + i);
  var idnametext = $('#ft' + i);

  $(idname).click(function() {

    var fw = $('.future').width();
    var bw = $('.event').width();
    var bn = i * 200;

    $('.event-text').removeClass('active');
    $(idnametext).addClass('active');

    $(".container").offset({
      left: -fw + bw + bn
    });

  });

});