4

Tengo estructurado todo el diseño de un slider de noticias y, agregué funcionalidad de dos botones para mover las noticias que se encuentran en slider, pero no mantiene una apariencia infinita que es lo ideal de un slider. Claro que no es por error de código sino porque no tiene estos efectos agregados.

Aquí en codepen encontré uno similar al que he diseñado tiene el efecto infinito por lo que los botones de izquierda y derecha se mantienen siempre, también tiene el efecto de movimiento automático y, el efecto de la mano que permite mover las noticias en ambas direcciones teniendo presionado el botón izquierdo del mouse.

Este es mi código:

$(function() {
  $('button').click(function() {
    $(this).parents('.SliderNews').children('button').removeClass('close').fadeIn(300);
    $(this).addClass('close').fadeOut(300);
    $(this).parents('.SliderNews').children('.SliderComplete').children('.slider').toggleClass('turn');
  });
});
.wrapper-slider-news {
  height: 50px;
  background: #666;
  color: #fff;
}

.SliderNews {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 13em;
  margin: auto;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #DDD;
  overflow: hidden;
}

.SliderNews button {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 1em 2em;
  border: none;
  background: #f0f0f0;
  transition: all ease-in-out .5s;
}

.SliderNews button[title="before"] {
  left: 0;
}

.SliderNews button[title="after"] {
  right: 0;
}

.SliderNews button.close {
  opacity: 0;
}

.SliderNews button.open {
  opacity: .8;
}

.SliderComplete {
  width: 90%;
  max-width: 960px;
  margin: 4em auto;
  position: absolute;
  top: 0;
  left: 2em;
  right: 2em;
  bottom: 0;
  border-left: 0.25em solid transparent;
  border-right: 0.25em solid transparent;
  overflow: hidden;
}

.SliderComplete:after {
  content: ' ';
  display: block;
  clear: both;
}

.slider {
  width: 300%;
  transition: all .5s;
}

.slider li {
  display: inline-block;
  width: 200px;
  margin: 0 1%;
  padding-bottom: 2em;
}

.slider li:first-child {
  margin-left: 0;
}

.slider li>* {
  max-width: 100%;
}

.slider li p {
  line-height: 1.3;
  color: #38373a;
}

.slider li p a {
  color: #ff8f00;
}

.turn {
  margin-left: -75%;
  transition: all .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-slider-news">
  <div class="SliderNews">
    <div class="SliderComplete">
      <ul class="slider">
        <li>
          <a>
            <img src="https://placehold.it/200x200" />
            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
            <p><a href="#">BMixer</a></p>
          </a>
        </li>
        <li>
          <a>
            <img src="https://placehold.it/200x200" />
            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
            <p><a href="#">BMixer</a></p>
          </a>
        </li>
        <li>
          <a>
            <img src="https://placehold.it/200x200" />
            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
            <p><a href="#">BMixer</a></p>
          </a>
        </li>
        <li>
          <a>
            <img src="https://placehold.it/200x200" />
            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
            <p><a href="#">BMixer</a></p>
          </a>
        </li>
        <li>
          <a>
            <img src="https://placehold.it/200x200" />
            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
            <p><a href="#">BMixer</a></p>
          </a>
        </li>
      </ul>
    </div>
    <button title="before" class="close">
      <svg version="1.1" id="left" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="12.7 2.5 15.4 25" enable-background="new 12.7 2.5 15.4 25" height="24" xml:space="preserve">
        <g id="chevron-right">
          <polygon fill="#38373A" points="13,15 25,27 27.8,24.2 18.6,15 27.8,5.8 25,3 	"/>
        </g>
      </svg>
  </button>
<button title="after" class="open">
      <svg version="1.1" id="right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="12.7 2.5 15.4 25" enable-background="new 12.7 2.5 15.4 25" height="24" xml:space="preserve">
        <g id="chevron-right">
          <polygon fill="#38373A" points="15.8,3 13,5.8 22.2,15 13,24.2 15.8,27 27.8,15 	"/>
        </g>
      </svg>
    </button>
  </div>

</div>

Me podrían guiar como agregar estos efectos a mi slider de noticias.

2
  • 1
    Te recomiendo la librería de Slick Slider. Commented el 5 ene. 2020 a las 18:07
  • Hola Mary, debes añadir información sobre lo que has intentado y los problemas/dificultades que estés encontrando. Tal y como está redactada la pregunta parece que no hay ningún error en particular sino que buscas a alguien que desarrolle algo desde cero; lo que no se ajusta bien al contenido del sitio. Lee Cómo preguntar para más información.
    – Alvaro Montoro
    Commented el 25 ene. 2020 a las 5:33

2 respuestas 2

3
+50

Este ejemplo es totalmente diferente al tuyo, pero la aplicación es básicamente la misma. Tenemos un slider "infinito" que avanza automáticamente cada 5 segundos y tenemos botones de control de avance o retroceso manual.

El código de jQuery está comentado.

//almacenar slider en una variable
var slider = $('#slider');
//almacenar botones
var siguiente = $('#btn-next');
var anterior = $('#btn-prev');

//mover ultima imagen al primer lugar
$('#slider .slider__section:last').insertBefore('#slider .slider__section:first');
//mostrar la primera imagen con un margen de -100%
slider.css('margin-left', '-'+100+'%');

//función para mover a la derecha
function moverD() {
	slider.animate({
		marginLeft:'-'+200+'%'
	} ,700, function(){
		$('#slider .slider__section:first').insertAfter('#slider .slider__section:last');
		slider.css('margin-left', '-'+100+'%');
	});
}

//función para mover a la izquierda
function moverI() {
	slider.animate({
		marginLeft:0
	} ,700, function(){
		$('#slider .slider__section:last').insertBefore('#slider .slider__section:first');
		slider.css('margin-left', '-'+100+'%');
	});
}

//función para mover a la derecha automáticamente cada 5 segundos
function autoplay() {
	interval = setInterval(function(){
		moverD();
	}, 5000);
}

//botón para mover a la derecha
siguiente.on('click',function() {
	moverD();
	clearInterval(interval);
	autoplay();
});

//botón para mover a la izquierda
anterior.on('click',function() {
	moverI();
	clearInterval(interval);
	autoplay();
});

autoplay();
* {
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  background: #EFC076;
}

.contenedor-slider {
  margin: auto;
  width: 85%;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 10px #fff,
 0 15px 50px;
}

.slider {
  display: flex;
  width: 400%;
}

.slider__section {
  width: 100%;
}

.slider__img {
  display: block;
  width: 100%;
  height: 100%;
}

.btn-prev, .btn-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  font-family: monospace;
  cursor: pointer;
}

.btn-prev:hover, .btn-next:hover {
  background: white;
}

.btn-prev {
  left: 10px;
}

.btn-next {
  right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contenedor-slider" class="contenedor-slider">
 <div id="slider" class="slider">
    <section class="slider__section"><img src="https://loremflickr.com/700/300?random=1" class="slider__img"></section>
    <section class="slider__section"><img src="https://loremflickr.com/700/300?random=2" class="slider__img"></section>
    <section class="slider__section"><img src="https://loremflickr.com/700/300?random=3" class="slider__img"></section>
    <section class="slider__section"><img src="https://loremflickr.com/700/300?random=4" class="slider__img"></section>
 </div>
  <div id="btn-prev" class="btn-prev">&#60;</div>
  <div id="btn-next" class="btn-next">&#62;</div>
</div>

-1

Puedes utilizar la librería Slick Slider.

$(function(){
    $('.slider').slick({
  infinite: true, //El slider infinito
  slidesToShow: 3, //Cantidad de elementos a mostrar
  slidesToScroll: 3 // Cantidad de elementos que correrá cada vez que se cambie de página
});
});
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

	                                <ul class="slider">
	                                    <li>
	                                        <a>
	                                            <img src="https://placehold.it/200x200" />
	                                            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
	                                            <p><a href="#">BMixer</a></p>
	                                        </a>
	                                    </li>
	                                    <li>
	                                        <a>
	                                            <img src="https://placehold.it/200x200" />
	                                            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
	                                            <p><a href="#">BMixer</a></p>
	                                        </a>
	                                    </li>
	                                    <li>
	                                        <a>
	                                            <img src="https://placehold.it/200x200" />
	                                            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
	                                            <p><a href="#">BMixer</a></p>
	                                        </a>
	                                    </li>
	                                    <li>
	                                        <a>
	                                            <img src="https://placehold.it/200x200" />
	                                            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
	                                            <p><a href="#">BMixer</a></p>
	                                        </a>
	                                    </li>
	                                    <li>
	                                        <a>
	                                            <img src="https://placehold.it/200x200" />
	                                            <p><a href="#">EXO - 'MAMA' Mix</a> - Date</p>
	                                            <p><a href="#">BMixer</a></p>
	                                        </a>
	                                    </li>
	                                </ul>

1
  • En inglés y sin ninguna explicación.
    – Shaz
    Commented el 21 ene. 2020 a las 20:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.