Mostrando entradas con la etiqueta slider. Mostrar todas las entradas

domingo, 20 de julio de 2025

Slider con botones laterales y de localizacion

SLIDER CON BOTONES LATERALES Y DE LOCALIZACION.

CODIGO HTML

martes, 21 de mayo de 2024

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;
  }
 

viernes, 3 de mayo de 2024

Javascript - Slider con botones

Slider con ayuda de Javascript

Código para pegarlo en tu sitio web.

HTML5

</div>

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

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

</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);

sábado, 22 de abril de 2023

HTML - Slider

Crea un slider con boton para cambiar imagen con HTML5 y CSS

He acá el código.

HTML
 <section>
      <h1>GATOS</h1>
      <div class="slider">
        <input type="radio" id="btn-1" name="toggle" checked />
        <input type="radio" id="btn-2" name="toggle" />
        <input type="radio" id="btn-3" name="toggle" />
        <div class="slider-controls">
          <label for="btn-1"></label>
          <label for="btn-2"></label>
          <label for="btn-3"></label>
        </div>
        <div class="slider-inner">
          <div class="slider-slides">
            <img
              src="https://htmlacademy.ru/assets/courses/76/keks-1-small.jpg"
              alt="Кекс смотрит на еду"
            />
            <img
              src="https://htmlacademy.ru/assets/courses/76/keks-2-small.jpg"
              alt="Кекс смотрит на тебя"
            />
            <img
              src="https://htmlacademy.ru/assets/courses/76/keks-3-small.jpg"
              alt="Кекс не хочет никуда смотреть"
            />
          </div>
        </div>
      </div>
    </section>

CSS
section {
  margin: 40px auto;
  width: 450px;
  background-color: white;
  box-shadow: 0 0 3px #cccccc;
}

h1 {
  margin: 0;
  padding: 10px 0;
  text-align: center;
  font-weight: normal;
  font-size: 28px;
}

.slider {
  position: relative;
}

.slider input[type="radio"] {
  display: none;
}

.slider-inner {
  overflow: hidden;
}

.slider-slides {
  width: 300%;
  transition: transform 0.8s ease;
}

.slider-slides img {
  float: left;
  width: 450px;
  height: 320px;
}

.slider-controls {
  margin-bottom: 10px;
  text-align: center;
}

.slider-controls label {
  display: inline-block;
  margin: 0 3px;
  width: 10px;
  height: 10px;
  border: 4px solid white;
  border-radius: 50%;
  background-color: #cccccc;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: background-color 0.2s;
}

#btn-1:checked ~ .slider-controls label[for="btn-1"],
#btn-2:checked ~ .slider-controls label[for="btn-2"],
#btn-3:checked ~ .slider-controls label[for="btn-3"] {
  background-color: #666666;
}


#btn-1:checked ~ .slider-inner .slider-slides {
  transform: translate(0);
}

#btn-2:checked ~ .slider-inner .slider-slides {
  transform: translate(-450px);
}

#btn-3:checked ~ .slider-inner .slider-slides {
  transform: translate(-900px);
}

viernes, 22 de abril de 2022

Javascript - Slider con movimiento automático

Código HTML5

<div id="driver_car">
  
  <div class="buttons">
    <button id="prev"><i class="fas fa-arrow-left"></i></button>
    <button id="next"><i class="fas fa-arrow-right"></i></button>
  </div>

  <div class="slider">
    <div class="slide current"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>

</div>

Código CSS

#driver_car{
    width: 100%;
    height: 60vh;
    display: flex;
    align-content: center;
    justify-content: center;
    position: absolute;
    z-index: 0;
    margin: 50px 0px;
}

.slider {
    width: 70%;
    height: 100%;
    position: relative;
    z-index: 1;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
  }
  
  .slide.current {
    opacity: 1;
  }
  
  .buttons button#next {
    position: absolute;
    top: 40%;
    right: 25px;
    z-index: 2;
  }
  
  .buttons button#prev {
    position: absolute;
    top: 40%;
    left: 25px;
    z-index: 2;
  }
  
  .buttons button {
    border: 2px solid #fff;
    background-color: rgb(0, 140, 255);
    color: rgb(255, 255, 255);
    cursor: pointer;
    padding: 13px 15px;
    border-radius: 50%;
    outline: none;
  }
  
  .buttons button:hover {
    background-color: rgb(0, 161, 13);
    color: #333;
  }
  
  /* Backgorund Images */
   
  .slide:first-child {
    background: url('https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHx8&w=1000&q=80') no-repeat
      center center/cover;
  }
  .slide:nth-child(2) {
    background: url('https://www.xtrafondos.com/descargar.php?id=9162&resolucion=3840x2160') no-repeat
      center center/cover;
  }
  .slide:nth-child(3) {
    background: url('https://c4.wallpaperflare.com/wallpaper/971/1023/719/abstracto-coche-wallpaper-preview.jpg') no-repeat
      center center/cover;
  }
  .slide:nth-child(4) {
    background: url('https://images7.alphacoders.com/338/338509.jpg') no-repeat
      center center/cover;
  }
  .slide:nth-child(5) {
    background: url('https://source.unsplash.com/ULmaQh9Gvbg/1600x900') no-repeat
      center top/cover;
  } 
  .slide:nth-child(6)  {
    background: url('https://source.unsplash.com/ggZuL3BTSJU/1600x900') no-repeat
      center center/cover;
  }


Código Javascript

const slides = document.querySelectorAll('.slide');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
const auto = true; // Auto scroll
const intervalTime = 5000;
let slideInterval;

const nextSlide = () => {
  // Get current class
  const current = document.querySelector('.current');
  // Remove current class
  current.classList.remove('current');
  // Check for next slide
  if (current.nextElementSibling) {
    // Add current to next sibling
    current.nextElementSibling.classList.add('current');
  } else {
    // Add current to start
    slides[0].classList.add('current');
  }
  setTimeout(() => current.classList.remove('current'));
};

const prevSlide = () => {
  // Get current class
  const current = document.querySelector('.current');
  // Remove current class
  current.classList.remove('current');
  // Check for prev slide
  if (current.previousElementSibling) {
    // Add current to prev sibling
    current.previousElementSibling.classList.add('current');
  } else {
    // Add current to last
    slides[slides.length - 1].classList.add('current');
  }
  setTimeout(() => current.classList.remove('current'));
};

// Button events
next.addEventListener('click', e => {
  nextSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

prev.addEventListener('click', e => {
  prevSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

// Auto slide
if (auto) {
  // Run next slide at interval time
  slideInterval = setInterval(nextSlide, intervalTime);
}

Mike@Salinas

Gallery

Links

domingo, 20 de julio de 2025