Slider - Vanilla JS

horizontal Slider

horizontal Fader

vertical Slider

Slider auf JavaScript Basis habe ich schon einige geschrieben, nun aber versuche ich es mit einem anderen Ansatz, für das Sliden möchte ich das über CSS gestaltete Scrollen nutzen, dadurch ist die Umsetzung der Touch- und Wheel-Events nicht erforderlich, da es im Standard schon funktioniert.

Als Methoden zur Animierung sollen dann zusätzlich zum Wischen und Mousewheel/Mouspad (2-Finger), noch Pfeile (vorwärts/rückwärts), Bubbes (Punkte zur Steuerung und Anzeige aktiver Slide) oder Thumbnails (Bilder zur Steuerung und Anzeige aktiver Slide) und eine Autoplay Funktion (optional mit Play & Pause Button).

Das Sliden soll in horzontaler aber auch vertikaler Richtung funktionieren und Hintergrund-Bilder unterstützen.

Für ältere Browser wie den Internet Explorer habe ich noch den smooth scroll über requestAnimationFrame realisiert.

  • class="slider" : assign this object
  • class="horizontal" : horizontal Slider
  • class="vertical" : vertical Slider
  • class="arrows-outside" : position of arrows outside the slider
  • class="fade" : use fading not slide to change item
  • data-options="bubbles" : display small active links (for example circles) for navigation
  • data-options="thumbs" : display small active thumbnails for navigation
  • data-options="arrows" : display arrows to navigate
  • data-options="autoplay" : use interval to change slide
  • data-options="play_pause" : display play/pause button to interrupt sliding
  • data-interval="3000" : time for autoplay to move to next slide
HTML:
slider.htm HTML (1,75 kByte) 06.09.2021 17:06
<!DOCTYPE html >
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Slider/Fader</title>
    <link rel="stylesheet" id="slider.css" href="slider.css" />
  </head>
  <body>
    <h4>horizontal Slider</h4>
    <div class="slider horizontal arrows-outside" data-options="thumbs arrows autoplay play_pause">
      <ul>
        <li data-backgroundimage="/media/IMG_6867.jpg"></li>
        <li data-backgroundimage="/media/IMG_6868.jpg"></li>
        <li data-backgroundimage="/media/IMG_6869.jpg"></li>
        <li data-backgroundimage="/media/IMG_6870.jpg"></li>
        <li data-backgroundimage="/media/IMG_6871.jpg"></li>
        <li data-backgroundimage="/media/IMG_6872.jpg"></li>
      </ul>
    </div>
    <h4>horizontal Fader</h4>
    <div class="slider fade horizontal" data-options="thumbs arrows autoplay play_pause">
      <ul>
        <li data-backgroundimage="/media/IMG_6867.jpg"></li>
        <li data-backgroundimage="/media/IMG_6868.jpg"></li>
        <li data-backgroundimage="/media/IMG_6869.jpg"></li>
        <li data-backgroundimage="/media/IMG_6870.jpg"></li>
        <li data-backgroundimage="/media/IMG_6871.jpg"></li>
        <li data-backgroundimage="/media/IMG_6872.jpg"></li>
      </ul>
    </div>
    <h4>vertical Slider</h4>
    <div class="slider vertical" data-options="thumbs arrows autoplay">
      <ul>
        <li data-backgroundimage="/media/IMG_6867.jpg"></li>
        <li data-backgroundimage="/media/IMG_6868.jpg"></li>
        <li data-backgroundimage="/media/IMG_6869.jpg"></li>
        <li data-backgroundimage="/media/IMG_6870.jpg"></li>
        <li data-backgroundimage="/media/IMG_6871.jpg"></li>
        <li data-backgroundimage="/media/IMG_6872.jpg"></li>
      </ul>
    </div>
    <script src="slider.js"></script>
  </body>
</html>
JavaScript:
slider.js JavaScript (15,82 kByte) 07.09.2021 23:48
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function() {
  'use strict';

  function Slider(el) {
    var slider = el; // slider div
    var slides = el.querySelector('ul'); // slides ul list
    if (!slides.classList.contains('slides')) {
      slides.classList.add('slides');
    }
    var items = slides.children; // slides li items
    if (items.length > 1) {
      var controls = null; // bubbles/thumbs ul list
      var controlItems = []; // bubbles/thumbs li items
      var prev = null; // previous div button
      var next = null; // next div button
      var play = null; // play and pause div button
      var active = 0; // active slide position counter
      var slideshow = null;
      var isAuto = true; // is triggered by autoplay event

      // load stylesheet if not already loaded
      if (!document.getElementById('slider.css')) {
        var style = document.createElement("link");
        style.type = 'text/css';
        style.href = '/code/slider/slider.css';
        style.id = 'slider.css';
        style.rel = 'stylesheet';
        document.head.appendChild(style);
      }

      // get settings from dom
      var direction = el.classList.contains('vertical') ? 'vertical' : 'horizontal';
      if ((direction == 'horizontal') && !el.classList.contains('horizontal')) {
        el.classList.add('horizontal');
      }
      var fade = el.classList.contains('fade');
      var thumbs = false, bubbles = false, autoplay = false, arrows = false, playpause = false;
      if (el.dataset.options) {
        thumbs = el.dataset.options.indexOf('thumbs') !== -1;
        bubbles = el.dataset.options.indexOf('bubbles') !== -1;
        autoplay = el.dataset.options.indexOf('autoplay') !== -1;
        arrows = el.dataset.options.indexOf('arrows') !== -1;
        playpause = el.dataset.options.indexOf('play_pause') !== -1;
      }
      var interval = 3000;
      if (autoplay) {
        if (el.dataset.interval) {
          interval = parseInt(el.dataset.interval, 10);
          if (isNaN(interval)) {
            interval = 3000;
          }
        }
      }

      // set background image if no viewport support
      for(let i = 0; i < items.length; i++) {
        if (items[i].dataset.backgroundimage) {
          items[i].style.backgroundImage = "url('" + items[i].dataset.backgroundimage + "')";
        }
      }

      function activate (itemId) {
        isAuto = true;
        if (fade) {
          // fade in/out
          if (itemId >= items.length) {
            itemId = 0;
          } else if (itemId < 0) {
            itemId = items.length-1;
          }
          for (let i = 0; i < items.length; i++) {
            if (i == itemId) {
              items[i].classList.add('active');
              if (controls) {
                controlItems[i].classList.add('active');
              }
              active = i;
            } else {
              items[i].classList.remove('active');
              if (controls) {
                controlItems[i].classList.remove('active');
              }
            }
          }
        } else {
          // scroll into parent view
          el = items[itemId];
          if ('scrollBehavior' in document.documentElement.style) {
            el.parentNode.scrollTo({top: el.offsetTop, left: el.offsetLeft, behavior: 'smooth'});
          } else {
            slides.style.scrollSnapType = 'none';
            var top = el.offsetTop, left = el.offsetLeft, parent = el.parentNode, attr;
            attr = (direction == 'vertical' ? 'scrollTop' : 'scrollLeft');
            var from = parent[attr] || 0, to = (attr == 'scrollLeft' ? left : top);
            if (from == to) { return; }
            var start = Date.now();
            var tick = function () {
              var t = Math.min(1, ((Date.now() - start) / 1000));
              var eased =  t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1;
              var val = (eased * (to - from)) + from;
              parent[attr] = Math.floor(val);
              if (t<1) {
                window.requestAnimationFrame(tick);
              } else {
                slides.style.scrollSnapType = '';
              }
            };
            tick();
          }
        }
      }

      // add slide and snap scroll event (touch event)
      var scrollTimer;
      function startScroll() {
        if (isAuto) {
          isAuto = false;
        } else {
          if (slideshow) {
            pauseSlideshow();
          }
        }
        for (let i = 0; i < items.length; i++) {
          items[i].classList.remove('active');
          if (controls) {
            if (i>0 && i<items.length-1) {
              controlItems[i-1].classList.remove('active');
            }
          }
        }
      }
      function stopScroll() {
        clearTimeout(scrollTimer);
        scrollTimer = null;
        // find new active slide
        for (let i = 0; i < items.length; i++) {
          if ((Math.abs(slides.scrollTop - items[i].offsetTop) < 5) &&
              (Math.abs(slides.scrollLeft - items[i].offsetLeft) < 5)) {
            let u = i;
            if (u == 0) {
              u = items.length-2;
            } else if (u == items.length-1) {
              u = 1;
            }
            if (controls) {
              controlItems[u-1].classList.add('active');
            }
            items[u].classList.add('active');
            if (i != u) {
              isAuto = true;
              slides.scrollTo(items[u].offsetLeft, items[u].offsetTop);
            }
            active = u;
            break;
          }
        }
      }
      function sliderScroll(event) {
        if (scrollTimer) {
          clearTimeout(scrollTimer);
        } else {
          startScroll();
        }
        scrollTimer = setTimeout(stopScroll, 100);
      }
      slides.addEventListener('scroll', sliderScroll);

      // add slideshow
      var restartTimer;
      function startSlideshow () {
        if (restartTimer) {
          clearTimeout(restartTimer);
        }
        if (!slideshow) {
          slideshow = window.setInterval(function () {
            if (active+1 < items.length) {
              activate(++active);
            } else {
              activate(0);
            }
          }, interval);
        }
      }
      function stopSlideShow () {
        if (slideshow) {
          window.clearInterval(slideshow);
          slideshow = null;
        }
      }
      function pauseSlideshow () {
        if (slideshow) {
          window.clearInterval(slideshow);
          slideshow = null;
          restartTimer = setTimeout(startSlideshow, 5000);
        };
      }
      function toggleSlideshow (event) {
        if (play.classList.contains('play')) {
          startSlideshow();
          play.classList.remove('play');
          play.classList.add('pause');
        } else {
          stopSlideShow();
          play.classList.remove('pause');
          play.classList.add('play');
        }
      }
      if (autoplay) {
        startSlideshow();
      }

      // add play and pause button
      if (playpause) {
        play = document.createElement('div');
        play.className = autoplay ? 'pause' : 'play';
        play.addEventListener('click', toggleSlideshow);
        el.appendChild(play);
      }

      // add mouse event listeners
      var posInitial, posLast, diff, threshold = 100;
      function dragStart(event) {
        diff = 0;
        event.preventDefault();
        if (direction == 'horizontal') {
          posInitial = slides.scrollLeft;
          posLast = event.clientX;
        } else {
          posInitial = slides.scrollTop;
          posLast = event.clientY;
        }
        slides.style.scrollSnapType = 'none';
        document.addEventListener('mouseup', dragEnd);
        slides.addEventListener('mousemove', dragAction);
      }
      function dragAction(event) {
        if (direction == 'horizontal') {
          diff = diff + (posLast - event.clientX);
          posLast = event.clientX;
          slides.scroll(posInitial + diff, 0);
        } else {
          diff = diff + (posLast - event.clientY);
          posLast = event.clientY;
          slides.scroll(0, posInitial + diff);
        }
      }
      function dragEnd(event) {
        slides.style.scrollSnapType = '';
        if (diff < -threshold) {
          activate(active-1);
        } else if (diff > threshold) {
          activate(active+1);
        } else {
          if (direction == 'horizontal') {
            slides.scroll(posInitial, 0);
          } else {
            slides.scroll(0, posInitial);
          }
        }
        document.removeEventListener('mouseup', dragEnd);
        slides.removeEventListener('mousemove', dragAction);
      }
      slides.addEventListener('mousedown', dragStart, true);

      // add control bubbles/thumbs
      if (bubbles || thumbs) {
        controls = document.createElement('ul');
        controls.classList.add('controls');
        controls.classList.add(thumbs ? 'thumbs' : 'bubbles');
        el.appendChild(controls);
        function controlClick(event) {
          if (autoplay) {
            pauseSlideshow();
          }
          let slide = this.getAttribute('slide');
          // respect clone slides
          if (!fade) {
            slide++;
          }
          activate(slide);
        }
        for(let i = 0; i < items.length; i++) {
          let li = document.createElement('li');
          li.setAttribute('slide', i);
          li.setAttribute('tabindex', '0');
          if (thumbs) {
            let file = null;
            if (items[i].dataset.backgroundimage) {
              file = items[i].dataset.backgroundimage;
            } else {
              let img = items[i].querySelector('img');
              if (img) {
                if (img.src && (img.src != 'data:,')) {
                  file = img.src;
                } else if (img.dataset.src) {
                  file = img.dataset.src;
                }
              }
            }
            if (file) {
              // load thumbnails
              //file = file.substr(0, file.lastIndexOf('.')) + '~120' + file.substr(file.lastIndexOf('.'));
              li.style.backgroundImage = "url('" + file + "')";
            }
          }
          li.addEventListener('click', controlClick);
          controls.appendChild(li);
        }
        controlItems = controls.children;
        controlItems[active].classList.add('active');
      }

      // add previous and next button
      if (arrows) {
        prev = document.createElement('div');
        prev.className = 'prev';
        function prevClick() {
          if (autoplay) {
            pauseSlideshow();
          }
          activate(active-1);
        }
        prev.addEventListener('click', prevClick);
        el.appendChild(prev);

        next = document.createElement('div');
        next.className = 'next';
        function nextClick() {
          if (autoplay) {
            pauseSlideshow();
          }
          activate(active+1);
        }
        next.addEventListener('click', nextClick);
        el.appendChild(next);
      }

      if (fade) {
        active = 0;
      } else {
        // clone slides
        slides.appendChild(items[0].cloneNode(true));
        slides.insertBefore(items[items.length-2].cloneNode(true), items[0]);
        // remove links for popup
        let link = items[0].querySelector('a.hires');
        if (link) {
          items[0].insertBefore(link.querySelector('figure'), link);
          items[0].removeChild(link);
        }
        link = items[items.length-1].querySelector('a.hires');
        if (link) {
          items[items.length-1].insertBefore(link.querySelector('figure'), link);
          items[items.length-1].removeChild(link);
        }
        // goto first slider item
        if (direction == 'vertical') {
          slides.scrollTo(0, slides.offsetHeight);
        } else {
          slides.scrollTo(slides.offsetWidth, 0);
        }
        active = 1;
      }
    }
  }
  function loadSlider(el) {
    new Slider(el);
  }

  // Viewport prototype to trigger event if element moves into viewport the fist time
  function Viewport(els, callback) {
    this.els = els;
    this.callback = callback;
    this.active = false;
    var self = this;
    var hidden = [];
    function alreadyObserved(el) {
      for(var i=0; i<hidden.length; i++) {
        if (el === hidden[i]) {
          return true;
        }
      }
      return false;
    }
    for (var i=0; i < els.length; i++) {
      var el = els[i];
      if (!el.parentNode.style.position) {
        // parent must have position attribute for getBoundingClientRect
        el.parentNode.style.position = 'relative';
        while(el && el.tagName.toLowerCase() !== 'body') {
          if (window.getComputedStyle(el).display === "none") {
            if (!alreadyObserved(el)) {
              hidden.push(el);
              var observer = new MutationObserver(function(mutations) {
                if (mutations[0].target.style.display !== 'none') {
                  self.handleEvent();
                }
              });
              observer.observe(el, { attributes: true });
              break;
            }
          }
          el = el.parentNode;
        }
      }
    }
    this.handleEvent.bind(this);
    // is already in viewport after dom ready
    function ready(f){
      /complete|loaded/i.test(document.readyState) ? f() : setTimeout(function(){ready(f);},9);
    }
    ready(function(){self.handleEvent();});
    // add event listener to scroll event to check visibility change
    document.addEventListener('scroll', this, true);
    window.addEventListener('resize', this, true);
    window.addEventListener('orientationchange', this, true);

  }

  Viewport.prototype = {
    // check if element is visible
    isVisible: function (el) {
      var style = window.getComputedStyle(el);
      return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
    },
    // check if element is in viewport
    isInViewport: function (el) {
      var bounding = el.getBoundingClientRect();
      return (
        bounding.bottom >= 0 &&
        bounding.right >= 0 &&
        bounding.top <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.left <= (window.innerWidth || document.documentElement.clientWidth)
      );
    },
    // handle the visibility check and the resulting action
    handleEvent: function () {
      if (this.active === false) {
        this.active = true;
        for (var i=0; i < this.els.length; i++) {
          if (this.isInViewport(this.els[i]) && this.isVisible(this.els[i])) {
            this.callback(this.els[i]);
          }
        }
        this.active = false;
      }
    }
  };

  // viewport intersection
  function Intersection(els, callback) {
    // create intersection observer
    let lazyobserver = new IntersectionObserver(function(entries, observer) {
      for (var i=0; i < entries.length; i++) {
        if (entries[i].isIntersecting) {
          callback(entries[i].target);
          lazyobserver.unobserve(entries[i].target);
        }
      }
    },
    {
      threshold: [0.1],
      // Set a minimum delay between notifications
      delay: 100
    });
    // start observing
    for (var i=0; i < els.length; i++) {
      lazyobserver.observe(els[i]);
    }
  }

  var els = document.querySelectorAll('.slider'), cnt = els.length, i;
  if (els.length > 0) {
    if ("IntersectionObserver" in window) {
      // use IntersectionObserver
      console.log('viewport: Slider lazy loading by IntersectionObserver');
      new Intersection(els, loadSlider);
    } else {
      // use eventListeners
      console.log('viewport: Slider lazy loading by MutationObserver and EventListeners');
      new Viewport(els, loadSlider);
    }
    // accessibility: handle tabindex enter keydown event
    document.addEventListener('keydown', function(event) {
      if (event.key === "Enter") {
        if (event.target.parentNode && event.target.parentNode.classList.contains('controls')) {
          event.target.click();
        }
      }
    });
  }
})();
StyleSheet:
slider.css StyleSheet (4,98 kByte) 06.09.2021 16:26
.slider {
  position: relative;
  width: 100%;
  height: 0;
  min-height: 1px;
  padding-top: 44%;
}
.slider.horizontal {
  overflow-y: clip;
  overflow-x: visible;
}
.slider.vertical {
  overflow-x: clip;
  overflow-y: visible;
}
.slider.horizontal.arrows-outside {
  margin: 0 auto;
  width: calc(100% - 100px);
}
.slider.vertical.arrows-outside {
  margin: auto 0;
  height: calc(100% - 100px);
}
.slider > .slides {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
  /*overflow-scrolling: auto;*/
  /* hide IE scrollbar */
  -ms-overflow-style: none;
}
/* hide WebKit scrollbar */
.slider > .slides::-webkit-scrollbar {
  display: none;
}
.slider.horizontal > .slides {
  bottom: -12px; /* scrollbar fix */
  display: flex;
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
}
.slider.vertical > .slides {
  right: -12px; /* scrollbar fix */
  scroll-snap-type: y mandatory;
  -ms-scroll-snap-type: y mandatory;
  overflow-y: scroll;
  overflow-x: hidden;
}
.slider .slides > li {
  position: relative;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  /* for background-image */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.slider.horizontal .slides > li {
  width: 100%;
  height: auto;
  display: inline-block;
  flex-shrink: 0;
}
.slider.vertical > .slides > li {
  height: 100%;
  width: auto;
}
.slider.fade > .slides > li {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 3s linear,opacity 3s linear;
}
.slider.fade > .slides > li.active {
  visibility: visible;
  opacity: 1;
  transition: visibility 3s linear,opacity 3s linear;
}
.slider > .slides > li > img {
  width: 100%;
  height: auto;
}

.slider > .controls {
  margin: 0;
  padding: 0;
}
.slider.horizontal > .controls {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 5%;
  text-align: center;
}
.slider.vertical > .controls {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translate(0, -50%);
  display: block;
}
.slider.vertical > .controls::after {
  display: table;
  content: '';
  clear: both;
}
.slider.horizontal > .controls.thumbs {
  height: 10%;
}
.slider.vertical > .controls.thumbs {
  width: 10%;
}
.slider > .controls > li {
  display: inline-block;
  outline: none;
  background-color: #fff;
  opacity: 0.8;
  cursor: pointer;
}
.slider.horizontal > .controls > li {
  display: inline-block;
  margin: 0 5px;
}
.slider.vertical > .controls > li {
  display: block;
  margin: 5px 0;
}

.slider > .controls.bubbles > li {
  border: 1px solid #000;
  transition: border 500ms ease-out;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
}
.slider > .controls.thumbs > li {
  border: 2px solid #000;
  transition: border 500ms ease-out;
}
.slider > .controls.bubbles > li.active {
  background-color: #000;
}
.slider > .controls.thumbs > li.active {
  border-color: #fff;
}
.slider > .controls.thumbs > li {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.slider.horizontal > .controls.thumbs > li {
  width: 10%;
  height: 100%;
}
.slider.vertical > .controls.thumbs > li {
  padding-top: 44%;
  width: 100%;
}

.slider > .prev, .slider > .next, .slider > .play, .slider > .pause {
  cursor: pointer;
  position: absolute;
  text-shadow: 1px 1px 1px #000;
}
.slider.horizontal > .prev, .slider.horizontal > .next {
  top: 50%;
  transform: translate(0, -50%);
}
.slider.vertical > .prev, .slider.vertical > .next {
  left: 50%;
  transform: translate(-50%, 0);
}
.slider.horizontal > .prev {
  left: 15px;
}
.slider.horizontal.arrows-outside > .prev {
  left: -35px;
}
.slider.horizontal > .next {
  right: 15px;
}
.slider.horizontal.arrows-outside > .next {
  right: -35px;
}
.slider.vertical > .prev {
  top: 15px;
}
.slider.vertical.arrows-outside > .prev {
  top: -35px;
}
.slider.vertical > .next {
  bottom: 15px;
}
.slider.vertical.arrows-outside > .next {
  bottom: -35px;
}

.slider.arrows-outside > .prev::after, .slider.arrows-outside > .next::after {
  color: #000;
}

.slider > .prev.hidden, .slider > .next.hidden {
  display: none;
}
.slider > .prev::after, .slider > .next::after, .slider > .play::after, .slider > .pause::after {
  display: inline-block;
  color: #fff;
  font-size: 2em;
}
.slider.horizontal > .prev::after {
  content: '\140a';
}
.slider.horizontal > .next::after {
  content: '\1405';
}
.slider.vertical > .prev::after {
  content: '\1403';
}
.slider.vertical > .next::after {
  content: '\1401';
}

.slider > .play, .slider > .pause {
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
}
.play:hover::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '\23EF';
}
.pause:hover::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '\23f8';
}

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany




+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Google Maps-Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.104
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 9. Oct 2021 15:16:12
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.3 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 800.000 MHz