БЛОГ НА HUSL


Добавление слайд-шоу на сайт

Автор вопроса: Lcashe

Помогите пожалуйста добавить слайд шоу на сайт. Просто слайд шоу с кнопками next и prev и счетчиком слайдов. Вот код сайта: .html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta oncontextmenu="return false;">
    <title>Photography</title>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <link rel="stylesheet" type="text/css" href="Home_page_style.css"/>
  </head>
  <body>
    <div class="background">
      <h1 class="logo">Name</h1>
      <h3 class="sub_logo">Photography</h3>

      <nav>
        <ul>
          <li><a href="Home_page.html" class="active">Home</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <div class="slide_container">
      <h1 class="gallery"><i class="fas fa-images"></i>Gallery</h1>
      <h2 class="latest">Latest photos:</h2>
    </div>
  </body>
</html>

.css

*{
  font-family: "montserrat", sans-serif;
  box-sizing: border-box;
  margin: 0;
  margin-top: -10px;
  padding: 0;
}

.background {
  background: #333;
  height: 130px;
  width: 100%;
}

.background h1.logo {
  font-size: 33px;
  margin-left: 30px;
  transform: translateY(110%);
  color: #e3e3e3;
}

.background h3.sub_logo {
  font-size: 23px;
  margin-left: 30px;
  transform: translateY(200%);
  color: #e3e3e3;
}

.background nav {
  height: 140px;
  width: 100%;
}

.background ul {
  float: right;
  margin-right: 50px;
  transform: translateY(150%);
}

.background ul li {
  display: inline-block;
}

.background ul li a {
  font-family: "montserrat", sans-serif;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  margin: 0 7px;
  padding: 7px 13px;
  font-size: 20px;
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: .1s;
}

.background ul li a.active {
  font-family: "montserrat", sans-serif;
  color: #000;
  background: rgba(241, 196, 15, 1);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  transition: .2s;
  border-radius: 3px;
  box-shadow: 0 0 10px;
  }

.background ul li a.active:hover {
  color: #fff;
  background: #333;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  transition: .2s;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

.background ul li a:hover {
  font-family: "montserrat", sans-serif;
  color: rgba(0, 0, 0, 1);
  background: rgba(241, 196, 15, 1);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1);
  transition: .1s;
}

h1.gallery {
  color: #333;
  letter-spacing: 0.3em;
  text-align: center;
  transform: translateY(110%);
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 550px;
  margin-right: 550px;
  transition: .5s;
}

h1.gallery:hover {
  color: #333;
  letter-spacing: 0.4em;
  text-align: center;
  transform: translateY(110%);
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 350px;
  margin-right: 350px;
  transition: .5s;
}

h2.latest {
  color: #333;
  letter-spacing: 0.2em;
  text-align: center;
  transform: translateY(560%);
  border-left: 70px solid #333;
  border-right: 70px solid #333;
  margin-left: 500px;
  margin-right: 500px;
  padding-right: 20px;
  padding-left: 20px;
  transition: .5s;
}

Источник

Ответы (1 шт):

Автор решения: Roma

Вот пример,застилизуйте как хотите)

function slider({container, slide, nextArrow, prevArrow, totalCounter, currentCounter,wrapper, field}) {
    // Slider

    let offset = 0;
    let slideIndex = 1;

    const slides = document.querySelectorAll(slide),
        slider = document.querySelector(container),
        prev = document.querySelector(prevArrow),
        next = document.querySelector(nextArrow),
        total = document.querySelector(totalCounter),
        current = document.querySelector(currentCounter),
        slidesWrapper = document.querySelector(wrapper),
        width = window.getComputedStyle(slidesWrapper).width,
        slidesField = document.querySelector(field);

    if (slides.length < 10) {
        total.textContent = `0${slides.length}`;
        current.textContent = `0${slideIndex}`;
    } else {
        total.textContent = slides.length;
        current.textContent = slideIndex;
    }

    slidesField.style.width = 100 * slides.length + '%';
    slidesField.style.display = 'flex';
    slidesField.style.transition = '0.5s all';

    slidesWrapper.style.overflow = 'hidden';

    slides.forEach(slide => {
        slide.style.width = width;
    });

    slider.style.position = 'relative';

    const indicators = document.createElement('ol'),
        dots = [];
    indicators.classList.add('carousel-indicators');
    indicators.style.cssText = `
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 15;
        display: flex;
        justify-content: center;
        margin-right: 15%;
        margin-left: 15%;
        list-style: none;
    `; 
    slider.append(indicators);

    for (let i = 0; i < slides.length; i++) {
        const dot = document.createElement('li');
        dot.setAttribute('data-slide-to', i + 1);
        dot.style.cssText = `
            box-sizing: content-box;
            flex: 0 1 auto;
            width: 30px;
            height: 6px;
            margin-right: 3px;
            margin-left: 3px;
            cursor: pointer;
            background-color: #fff;
            background-clip: padding-box;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            opacity: .5;
            transition: opacity .6s ease;
        `;
        if (i == 0) {
            dot.style.opacity = 1;
        }
        indicators.append(dot);
        dots.push(dot);
    }

    next.addEventListener('click', () => {
        if (offset == (deleteNotDigits(width) * (slides.length - 1))) {
            offset = 0;
        } else {
            offset += deleteNotDigits(width);
        }

        slidesField.style.transform = `translateX(-${offset}px)`;

        if (slideIndex == slides.length) {
            slideIndex = 1;
        } else {
            slideIndex++;
        }

        if (slides.length < 10) {
            current.textContent = `0${slideIndex}`;
        } else {
            current.textContent = slideIndex;
        }

        dots.forEach(dot => dot.style.opacity = ".5");
        dots[slideIndex - 1].style.opacity = 1;
    });

    prev.addEventListener('click', () => {
        if (offset == 0) {
            offset = deleteNotDigits(width) * (slides.length - 1);
        } else {
            offset -= deleteNotDigits(width);
        }

        slidesField.style.transform = `translateX(-${offset}px)`;

        if (slideIndex == 1) {
            slideIndex = slides.length;
        } else {
            slideIndex--;
        }

        if (slides.length < 10) {
            current.textContent = `0${slideIndex}`;
        } else {
            current.textContent = slideIndex;
        }

        dots.forEach(dot => dot.style.opacity = ".5");
        dots[slideIndex - 1].style.opacity = 1;
    });

    dots.forEach(dot => {
        dot.addEventListener('click', (e) => {
            const slideTo = e.target.getAttribute('data-slide-to');

            slideIndex = slideTo;
            offset = deleteNotDigits(width) * (slideTo - 1);

            slidesField.style.transform = `translateX(-${offset}px)`;

            if (slides.length < 10) {
                current.textContent = `0${slideIndex}`;
            } else {
                current.textContent = slideIndex;
            }

            dots.forEach(dot => dot.style.opacity = ".5");
            dots[slideIndex - 1].style.opacity = 1;
        });
    });

    function deleteNotDigits(str) {
        return +str.replace(/\D/g, '');
    }
}

slider({
    container: '.offer__slider',
    slide: '.offer__slide',
    nextArrow: '.offer__slider-next',
    prevArrow: '.offer__slider-prev',
    totalCounter: '#total',
    currentCounter: '#current',
    wrapper: '.offer__slider-wrapper',
    field: '.offer__slider-inner'
});
.offer {
  padding: 70px 0 100px 0;
  position: relative;
}

.offer .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.offer .bgc_y {
  position: absolute;
  width: 1109px;
  height: 780px;
  background: rgba(243, 255, 222, 0.45);
  z-index: -1;
  top: 50px;
}

.offer__text {
  width: 580px;
}

.offer__descr {
  font-size: 18px;
  margin-top: 30px;
  font-weight: 300;
  line-height: 24px;
}

.offer__action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.offer__advantages {
  width: 330px;
  margin-top: 50px;
}

.offer__advantages h2 {
  font-weight: bold;
  font-size: 20px;
  margin-top: 20px;
}

.offer__advantages h2:first-child {
  margin-top: 70px;
}

.offer__advantages-text {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 300;
  line-height: 21px;
}

.offer__slider {
  width: 650px;
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.offer__slider-counter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 180px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.5);
}

.offer__slider-wrapper {
  width: 100%;
  margin-top: 15px;
  -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
}

.offer__slider-prev {
  margin-right: 10px;
  cursor: pointer;
}

.offer__slider-next {
  margin-left: 10px;
  cursor: pointer;
}

.offer__slider #current {
  font-size: 48px;
  font-weight: bold;
  color: black;
}

.offer__slide {
  width: 100%;
  height: 390px;
}

.offer__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/*# sourceMappingURL=css.css.map */
 <div class="offer__slider">
      <div class="offer__slider-counter">
          <div class="offer__slider-prev">
              <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAACjCAMAAAA3vsLfAAAARVBMVEX///8AAACmpqbl5eVTU1P8/Pw7Ozs3Nzf5+fk+Pj5JSUlDQ0NGRkZBQUFMTExOTk5qamotLS0zMzOkpKS2trZ8fHzt7e0eI3ZtAAACyUlEQVR4nO3dC27bMBBF0aitajZp0/ya/S+18aeOo0gUOYY67wH3rkA+GJqGYZM3N0RERERERERE9F8rD9lP4Fh5vM1+BMPK0/At+xn8KrsBtu7eZg227vazBltv5fsAW3fjYdZg66uc1GDr6awGW0fvarC1d6EGW3PjhRpsrZ0+ecDW1fhBDba2JmqwNVUmarC1NJ012Fr6rAbbejNqsK02pwbbWuXHjBpsK42zarDVm12hsK00v0Jhq7ewQmGrtqwG23IVNdiWq6jBttT4q6IG20J1Ndjmq72v7dt92ajnl+yXfkXjXV1tw4x/ArayQjfNd/lnqvmyJa5QZ7bMWbNly501V7ZsNU+2dDVLtvFntpolW/qsWbIJqBmy5a/QwZBNYdbs2AR2g0NmbCJqXmwqs+bFNt5ma51zYpOZNSs2ITUjNp0VOhixKc2aDZvQbnDIhE1MzYTtPptpmgXb72ylTzmwqa3QwYJNUM2ATe59bZ88m+Ks6bPp7QaHxNlE1cTZVNW02WTVpNkk99BjwmzCasJsf7JpaumyMW3BhN2U2dhJg8m6abPJuomzqbqps/ENSDDJ/VSfTXLeDNgU3RzYBPcFCza99zcPNrl1asLGb0CC8YujWFLz5sMmNW9GbEpuTmxC+4ITG/9LiKbiZsamMm9mbPzDL5rEvPmxScybIZuCmyObwL7gyMY5IMHS3TzZ0t1M2bL3BVs2zm+LxWmBsTibMlbiOnVmWz13d7vusl/6Va2s0/vXrxv1mv3Kr4szxYNxgn0o7kuIxe0csbgLJhY3D8XinqtY3KoWizv8YnFjZCzuJ43FbbixuHs5Fjd9x+Je+VgTN9ga+7hOYWtt3MEWqexgi3ThBltH726w9XR2g62rf/sCbH2dPofA1tlxncLWW3mCLdJ+3mDr723eYAtUHo0vlk6sPGQ/ARERERERERERHfsLxBA2O4DKt0gAAAAASUVORK5CYII=" alt="prev">
          </div>
          <span id="current">03</span>
          /
          <span id="total">04</span>
          <div class="offer__slider-next">
              <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAdVBMVEX///8AAADb29tqamr4+Pju7u7W1tajo6P39/eOjo7x8fHIyMiRkZE6OjpQUFBkZGR7e3u4uLjl5eUgICDNzc2pqakzMzMaGhpgYGCwsLCbm5tzc3NbW1t/f38JCQkfHx8VFRVFRUWGhobAwMAoKChVVVUvLy90y6tdAAAEOklEQVR4nO2diVLcMBBEV7AhB2dIAiEQjgTy/5+YcMTs2pI1o4N2T837AfpVUaVeaSytVo7jOI7jOI7jOI7jOI7jOI7Tg/U3dILuhBN0gt6EcPYOnaEv4R/76BBdeTQMB+gUPXkyDEdrdI5+hBf20EG68d8wvEcn6cVgGI7RUTrxahjOT9FhuhA2+YxO04MtQ5MFZ9swHH5CB2pOGGOu4EwMzRWcqWE4+oAO1ZSIobGCEzU0VXDihpYKTsIwfDFTcFKGdgpO2tBKwZkxNLKDM2doo+DMG4aP6Hz1ZAwNFJycIX/ByRuyFxyBYdhFh6xCYsi9gyMypC44QkPigiM1DIesBUdsSFtwFIakBUdjyHlEpTKkLDhKQ8KCozUM39GJtagN6XZw9IZsBafEkKvgFBlSFZwyQ6aCU2rIc0RVbEhTcMoNwzVHwakwJCk4VYYUOzh1huFGX3B23phKw4KCU/0X35yf5g3DmW4GBx23CFXBQYctQ1Nw0FkLURQcdNRixAUHHbQcacFB56xAOIODjlmDbAcHnbIOScFBZ6xEsIODjlhLfgcHnbCeXMFB52tA5ogKHa8F8zM46HRt2DFvOFdw0NFakS446GTNSBYcdLCGJAoOOlZL4gUHnaop0YKDDtWYr+YNIwUHnag5kx0cdKAO7Jk3HBUcdJouHJs3DPen1g03Cw46STdOzBsOn4mjc/Rk37zh8xEVOkRfHgsOOkNv9swbHlg33Df+X/r02S06RE8ura8WF8ZX/NtT463tam28l24M3KCj9GFzyw2dpQfbl0+h03RgtPWNjtOe8fEFOk9rpkdQ6ESNuRr7WTP8MRW0ZRg5lzFleBefjkbHakdqwh2dqxnJIT50sEbcpwcx0dHaMDdMi87WhNmBaHS4FswPtaPT1ZO7Owudr5pf8378hr9zguSGM4uEDUPRJ6XokDXIXnRBp6xgbjDYgqH46zV00FLkd0ihkxai+IoUHbWIP5qrTtBhS7hU+FEaKp/9QsfVI1wkaA0f1He47L4xlYIE9/DUCTLcpVTjp1okYFQIktxpVi54gY4upNTvluZuwULBK5KLvlalhrFTs6VSJBg9NVsqBX5k73rpBbX3QqFRC3JdXrpSG7JdQLvSGtJdIrxSGjItEgMaQapFYkDud0f64oxYMHtqtlSkgnSLxIDMT3JqtlREgtRvBUoEKS7TTSIQ5LgQOUnW747nt26cnCDtIjGQEcyPViyeWb97ig3RDHOCDLd155kRVJ6aLZW0IPkiMZDyY3n5IE9CkPN5rihxQYZTMykxP45TMykRQd1oxeKZCrKcmkkZ+11rRysWz0jwAZ2nPduCBKMVaswuEgMbfjYei5/wKkgyWqHG7CIx8OJ3bm6RGHgWjHyQbIYnQcpTMymPgpynZlLoRivU0I1WaFkb2W5yHMdxHMdxHMdxHMdxHMdxlsdffkhWvU4rifUAAAAASUVORK5CYII=" alt="next">
          </div>
      </div>
      <div class="offer__slider-wrapper">
          <div class="offer__slider-inner">
              <div class="offer__slide">
                  <img src="https://www.airtransportanimal.com/wp-content/uploads/1970/01/panama-animal-transport-plane.jpg" alt="pepper">
              </div>
              <div class="offer__slide">
                  <img src="https://www.apa.org/images/2020-03-feature-giraffe_tcm7-269465.png" alt="food">
              </div>
              <div class="offer__slide">
                  <img src="https://www.apa.org/images/2020-03-feature-giraffe_tcm7-269465.png" alt="oil">
              </div>
              <div class="offer__slide">
                  <img src="https://www.apa.org/images/2020-03-feature-giraffe_tcm7-269465.png" alt="paprika">
              </div>
          </div>
      </div>
  </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.