adicionado slide de fotos

FantasticAnimals/css/0styles.css

@@ -26,4 +26,6 @@
 @import url(./util/horario.css);
 
 @import url(./util/btc.css);
+
+@import url(./util/slide.css);
 /* ----- */

FantasticAnimals/css/util/slide.css

@@ -0,0 +1,101 @@
+.galeria {
+   grid-column: 1 / -1;
+}
+
+.slide-wrapper {
+   overflow: hidden;
+   grid-column: 1 / -1;
+}
+
+.slide {
+   display: flex;
+}
+
+.slide:hover {
+   will-change: transform;
+}
+
+.slide li {
+   flex-shrink: 0;
+   width: 80vw;
+   max-width: 800px;
+   margin: 0 20px;
+   border-radius: 4px;
+   overflow: hidden;
+   box-shadow: 0 2px 4px rgba(0,0,0,.4);
+   opacity: .8;
+   transform: scale(.8);
+   transition: .4s;
+}
+
+
+.slide li.active {
+   opacity: 1;
+   transform: scale(1);
+}
+
+/* [data-control="slide"] {
+   display: flex;
+   justify-content: center;
+   margin-top: 20px;
+}
+
+[data-control="slide"] li a {
+   display: block;
+   width: 12px;
+   height: 12px;
+   background: #FB5;
+   border-radius: 50%;
+   overflow: hidden;
+   text-indent: -999px;
+   margin: 5px;
+} */
+
+
+[data-control="slide"] li.active a, [data-control="slide"] li a:hover {
+   background: #E54;
+}
+
+.custom-controls {
+   display: flex;
+   justify-content: center;
+   flex-wrap: wrap;
+   grid-column: 1 / -1;
+}
+
+.custom-controls li {
+   opacity: .8;
+   transform: scale(.8);
+   width: 40px;
+   height: 40px;
+   border-radius: 50%;
+   overflow: hidden;
+   margin: 2px;
+   box-shadow: 0 2px 2px rgba(0,0,0,.5);
+   transition: .3s;
+}
+
+.custom-controls li.active {
+   opacity: 1;
+   transform: scale(1);
+}
+
+/* .arrow-nav {
+   display: flex;
+   justify-content: space-around;
+   margin:20px 0;
+}
+
+.arrow-nav button {
+   cursor: pointer;
+   border: none;
+   border-radius: 4px;
+   color: white;
+   width: 40px;
+   height: 40px;
+   background: #FB5 url('../img/arrow.svg') center center no-repeat;
+}
+
+.arrow-nav button.prev {
+   transform: rotate(-180deg);
+} */

FantasticAnimals/index.html

@@ -123,6 +123,27 @@ <h1 class="titulo"> Números</h1>
             </div>
         </section>
 
+        <section class="grid-section galeria" data-js="scroll"> 
+            <ul class="custom-controls">
+                <li><img src="img/slide/foto1-thumb.jpg" alt=""></li>
+                <li><img src="img/slide/foto2-thumb.jpg" alt=""></li>
+                <li><img src="img/slide/foto3-thumb.jpg" alt=""></li>
+                <li><img src="img/slide/foto4-thumb.jpg" alt=""></li>
+                <li><img src="img/slide/foto5-thumb.jpg" alt=""></li>
+                <li><img src="img/slide/foto6-thumb.jpg" alt=""></li>
+            </ul>
+            <div class="slide-wrapper">
+                <ul class="slide">
+                <li><img src="img/slide/foto1.jpg" alt=""></li>
+                <li><img src="img/slide/foto2.jpg" alt=""></li>
+                <li><img src="img/slide/foto3.jpg" alt=""></li>
+                <li><img src="img/slide/foto4.jpg" alt=""></li>
+                <li><img src="img/slide/foto5.jpg" alt=""></li>
+                <li><img src="img/slide/foto6.jpg" alt=""></li>
+                </ul>
+            </div>
+        </section>
+
         <section class="grid-section contato" data-js="scroll" id="contato">
             <h1 class="titulo">Contato</h1>
             <div class="mapa" data-tooltip aria-label="Endereço próximo ao estacionamento.">

FantasticAnimals/js/import.js

@@ -9,6 +9,7 @@ import ScrollAnima from './modules/scroll-anima.js';
 import DropdownMenu from './modules/dropdown-menu.js';
 import MenuMobile from './modules/menu-mobile.js';
 import Funcionamento from './modules/funcionamento.js';
+import { SlideNav } from './modules/slide.js';
 
 const scrollSuave = new ScrollSuave('[data-js="menu"] a[href^="#"]');
 scrollSuave.init();
@@ -40,3 +41,8 @@ funcionamento.init();
 fetchAnimais('./js/animaisapi.json', '.numeros-grid');
 
 fetchBitcoin('https://blockchain.info/ticker', '.btc-preco');
+
+
+const slide = new SlideNav('.slide', '.slide-wrapper');
+slide.init();
+slide.addControl('.custom-controls');

FantasticAnimals/js/modules/slide.js

@@ -0,0 +1,205 @@
+import debounce from './debounce.js'
+
+export default class Slide {
+  constructor(slide, wrapper) {
+    this.slide = document.querySelector(slide);
+    this.wrapper = document.querySelector(wrapper);
+    this.dist = { finalPosition: 0, startX: 0, movement: 0 };
+    this.activeClass = 'active';
+    this.changeEvent = new Event('changeEvent');
+  }
+
+  transition(active) {
+    this.slide.style.transition = active ? 'transform .3s' : '';
+  }
+
+  moveSlide(distX) {
+    this.dist.movePosition = distX;
+    this.slide.style.transform = `translate3d(${distX}px, 0, 0)`;
+  }
+
+  updatePosition(clientX) {
+    this.dist.movement = (this.dist.startX - clientX) * 1.6;
+    return this.dist.finalPosition - this.dist.movement;
+  }
+
+  onStart(event) {
+    let movetype;
+    if (event.type === 'mousedown') {
+      event.preventDefault();
+      this.dist.startX = event.clientX;
+      movetype = 'mousemove';
+    } else {
+      this.dist.startX = event.changedTouches[0].clientX;
+      movetype = 'touchmove';
+    }
+    this.wrapper.addEventListener(movetype, this.onMove);
+    this.transition(false);
+  }
+
+  onMove(event) {
+    const pointerPosition = (event.type === 'mousemove') ? event.clientX : event.changedTouches[0].clientX;
+    const finalPosition = this.updatePosition(pointerPosition);
+    this.moveSlide(finalPosition);
+  }
+
+  onEnd(event) {
+    const movetype = (event.type === 'mouseup') ? 'mousemove' : 'touchmove';
+    this.wrapper.removeEventListener(movetype, this.onMove);
+    this.dist.finalPosition = this.dist.movePosition;
+    this.transition(true);
+    this.changeSlideOnEnd();
+  }
+
+  changeSlideOnEnd() {
+    if (this.dist.movement > 120 && this.index.next !== undefined) {
+      this.activeNextSlide();
+    } else if (this.dist.movement < -120 && this.index.prev !== undefined) {
+      this.activePrevSlide();
+    } else {
+      this.changeSlide(this.index.active);
+    }
+  }
+
+  addSlideEvents() {
+    this.wrapper.addEventListener('mousedown', this.onStart);
+    this.wrapper.addEventListener('touchstart', this.onStart);
+    this.wrapper.addEventListener('mouseup', this.onEnd);
+    this.wrapper.addEventListener('touchend', this.onEnd);
+  }
+
+
+  // Slides config
+
+  slidePosition(slide) {
+    const margin = (this.wrapper.offsetWidth - slide.offsetWidth) / 2;
+    return -(slide.offsetLeft - margin);
+  }
+
+  slidesConfig() {
+    this.slideArray = [...this.slide.children].map((element) => {
+      const position = this.slidePosition(element);
+      return { position, element };
+    });
+  }
+
+  slidesIndexNav(index) {
+    const last = this.slideArray.length - 1;
+    this.index = {
+      prev: index ? index - 1 : undefined,
+      active: index,
+      next: index === last ? undefined : index + 1,
+    }
+  }
+
+  changeSlide(index) {
+    const activeSlide = this.slideArray[index];
+    this.moveSlide(activeSlide.position);
+    this.slidesIndexNav(index);
+    this.dist.finalPosition = activeSlide.position;
+    this.changeActiveClass();
+    this.wrapper.dispatchEvent(this.changeEvent);
+  }
+
+  changeActiveClass() {
+    this.slideArray.forEach((item) => item.element.classList.remove(this.activeClass));
+    this.slideArray[this.index.active].element.classList.add(this.activeClass);
+  }
+
+  activePrevSlide() {
+    if (this.index.prev !== undefined) this.changeSlide(this.index.prev);
+  }
+
+  activeNextSlide() {
+    if (this.index.next !== undefined) this.changeSlide(this.index.next);
+  }
+
+  onResize() {
+    setTimeout(() => {
+      this.slidesConfig();
+      this.changeSlide(this.index.active);
+    }, 1000)
+  }
+
+  addResizeEvent() {
+    window.addEventListener('resize', this.onResize)
+  }
+
+  bindEvents() {
+    this.onStart = this.onStart.bind(this);
+    this.onMove = this.onMove.bind(this);
+    this.onEnd = this.onEnd.bind(this);
+
+    this.activePrevSlide = this.activePrevSlide.bind(this);
+    this.activeNextSlide = this.activeNextSlide.bind(this);
+
+    this.onResize = debounce(this.onResize.bind(this), 200);
+  }
+
+
+  init() {
+    this.transition(true);
+    this.bindEvents();
+    this.addSlideEvents();
+    this.slidesConfig();
+    this.addResizeEvent();
+    this.changeSlide(0);
+    return this;
+  }
+}
+
+
+export class SlideNav extends Slide {
+  constructor(slide, wrapper) {
+    super(slide, wrapper);
+    this.bindControlEvents();
+  }
+
+  addArrow(prev, next) {
+    this.prevElement = document.querySelector(prev);
+    this.nextElement = document.querySelector(next);
+    this.addArrowEvent();
+  }
+
+  addArrowEvent() {
+    this.prevElement.addEventListener('click', this.activePrevSlide);
+    this.nextElement.addEventListener('click', this.activeNextSlide);
+  }
+
+  createControl() {
+    const control = document.createElement('ul');
+    control.dataset.control = 'slide';
+
+    this.slideArray.forEach((item, index) => {
+      control.innerHTML += `<li> <a href="#slide${index + 1}">${index}</a> </li> `
+    });
+    this.wrapper.appendChild(control);
+    return control;
+  }
+
+  eventControl(item, index) {
+    item.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.changeSlide(index);
+    });
+    this.wrapper.addEventListener('changeEvent', this.activeControlItem);
+  }
+
+  activeControlItem() {
+    this.controlArray.forEach(item => item.classList.remove(this.activeClass));
+    this.controlArray[this.index.active].classList.add(this.activeClass);
+  }
+
+  addControl(customControl) {
+    this.control = document.querySelector(customControl) || this.createControl();
+    this.controlArray = [...this.control.children];
+
+    this.activeControlItem();
+    this.controlArray.forEach(this.eventControl);
+  }
+
+  bindControlEvents() {
+    this.eventControl = this.eventControl.bind(this);
+    this.activeControlItem = this.activeControlItem.bind(this);
+  }
+}