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.