CSS3 - Slider infinito

Código para que sus imagenes se muevan de derecha a izquierda infinitamente y sin espacios en blanco. Muy similar a Marquee, pero mucho mejor.

HTML5

<!------------- LOGOS SLIDE ------------->

  <div class="logos">

    <div class="logos-slide">

      <a href="https://xviewplus.com/" target="_blank"><img src="img/xview logo.jpg" /></a>

      <a href="https://www.paramountplus.com/home/" target="_blank"><img src="img/paramountplus logo.jpg" /></a>

      <a href="https://www.netflix.com/browse" target="_blank"><img src="img/netflix logo.jpg" /></a>

      <a href="https://play.max.com/home" target="_blank"><img src="img/hbo max logo.jpg" /></a>

      <a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>

      <a href="p/dinosaurios.html"><img src="img/jurassic park logo.jpg" /></a>

      <a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>

      <a href="https://www.youtube.com/" target="_blank"><img src="img/btn_youtube.jpg" /></a>

    </div>

<div class="logos-slide">

<a href="https://xviewplus.com/" target="_blank"><img src="img/xview logo.jpg" /></a>

<a href="https://www.paramountplus.com/home/" target="_blank"><img src="img/paramountplus logo.jpg" /></a>

<a href="https://www.netflix.com/browse" target="_blank"><img src="img/netflix logo.jpg" /></a>

<a href="https://play.max.com/home" target="_blank"><img src="img/hbo max logo.jpg" /></a>

<a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>

<a href="p/dinosaurios.html"><img src="img/jurassic park logo.jpg" /></a>

<a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>

<a href="https://www.youtube.com/" target="_blank"><img src="img/btn_youtube.jpg" /></a>

</div>

  </div>

CSS3

/************ CARRUSEL ************/

@keyframes slide {

    from {

      transform: translateX(0);

    }

    to {

      transform: translateX(-100.25%);

    }

  }

  .logos {

    overflow: hidden;

    padding: 60px 0;

    background: white;

    white-space: nowrap;

    position: relative;

  }

  .logos:before,

  .logos:after {

    position: absolute;

    top: 0;

    width: 250px;

    height: 100%;

    content: "";

    z-index: 2;

  }

  .logos:before {

    left: 0;

    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);

  }

  .logos:after {

    right: 0;

    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);

  }

  .logos:hover .logos-slide {

    animation-play-state: paused;

  }

  .logos-slide {

    display: inline-block;

    animation: 22s slide infinite linear;

  }

  .logos-slide img {

    height: 200px;

    margin: 0 40px;

    cursor: pointer;

  }

 

CSS 3 - Botón flecha con movimiento

Código para copiar y pegar...

HTML:

    <div id="container">

      <button class="learn-more">

        <span class="circle" aria-hidden="true">

          <span class="icon arrow"></span>

        </span>

        <a href="https://mike-salinas.blogspot.com/"

        target="_blank" style="width: 100%; height: 100%;">

        <span class="button-text">Learn More</span></a>

      </button>

    </div>

CSS

button {

  position: relative;

  display: inline-block;

  cursor: pointer;

  outline: none;

  border: 0;

  vertical-align: middle;

  text-decoration: none;

  background: transparent;

  padding: 0;

  font-size: inherit;

  font-family: inherit;

  &.learn-more {

    width: 12rem;

    height: auto;

    .circle {

      transition: all 0.45s cubic-bezier(0.65,0,.076,1);

      position: relative;

      display: block;

      margin: 0;

      width: 3rem;

      height: 3rem;

      background: black;

      border-radius: 1.625rem;

      .icon {

        transition: all 0.45s cubic-bezier(0.65,0,.076,1);

        position: absolute;

        top: 0;

        bottom: 0;

        margin: auto;

        background: white;

        &.arrow {

          transition: all 0.45s cubic-bezier(0.65,0,.076,1);

          left: 0.625rem;

          width: 1.125rem;

          height: 0.125rem;

          background: none;

          &::before {

            position: absolute;

            content: '';

            top: -0.25rem;

            right: 0.0625rem;

            width: 0.625rem;

            height: 0.625rem;

            border-top: 0.125rem solid #fff;

            border-right: 0.125rem solid #fff;

            transform: rotate(45deg);

          }

        }

      }

    }

    .button-text {

      transition: all 0.45s cubic-bezier(0.65,0,.076,1);

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      padding: 0.75rem 0;

      margin: 0 0 0 1.85rem;

      color: black;

      font-weight: 700;

      line-height: 1.6;

      text-align: center;

      text-transform: uppercase;

    }

  }

  &:hover {

    .circle {

      width: 100%;

      .icon {

        &.arrow {

        background: white;

        transform: translate(1rem, 0);

        }

      }

    }

    .button-text {

      color: white;

    }

  }

}

Javascript - Slider con botones

Slider con ayuda de Javascript

Código para pegarlo en tu sitio web.

HTML5

    <div id="contenedor_slider">

        <div id="slider">

            <img src="https://images.unsplash.com/photo-1564148204877-9bf116988675?q=80&w=1674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 1">

            <img src="https://plus.unsplash.com/premium_photo-1674257750724-893425035b2f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 2">

            <img src="https://images.unsplash.com/photo-1548097160-627fd636ee56?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 3">

            

          </div>

          <div class="btn_slide">

            <button id="prev">Anterior</button>

            <button id="next">Siguiente</button>

      

          </div>

          

    

    </div>

CSS3

#contenedor_slider{

  width: 100%;

  height: auto;

  background: rgb(42, 143, 211);

  display: flex;

  flex-flow: column;

  align-items: center;

  justify-content: center;

}

.btn_slide{

}

#slider {

    width: 600px;

    height: 350px;

    overflow: hidden;

    position: relative;

    background: black;

  }

  

  #slider img {

    width: 100%;

    height: 100%;

    position: absolute;

    opacity: 0;

  }

  

JAVASCRIPT

const prev = document.getElementById('prev');

const next = document.getElementById('next');

const images = document.querySelectorAll('#slider img');

let currentImage = 0;

function showImage(n) {

  images.forEach(img => img.style.opacity = '0');

  images[n].style.opacity = '1';

  currentImage = n;

}

prev.addEventListener('click', () => {

  currentImage--;

  if (currentImage < 0) currentImage = images.length - 1;

  showImage(currentImage);

});

next.addEventListener('click', () => {

  currentImage++;

  if (currentImage >= images.length) currentImage = 0;

  showImage(currentImage);

});

showImage(currentImage);