var prod_all = $('#container-slider');
var prod = prod_all.find('section');
var number_prod = prod.length;
var slider = $('.slider');
slider.css('width', 100*number_prod/5+'%');
prod.css('width', 100/number_prod*5+'%');
var s = 0;
function sliders(){
if(s == 0){
slider.css('left',0);
}
else if(s > 0 ){
slider.css({'left': '-'+100*s+'%'});
}
}
var left_circle = $('#left-circle');
var right_circle = $('#right-circle');
right_circle.add(next).on('click', function(){
if(s < number_prod - 13){
s++;
sliders();
}
});
left_circle.add(prev).on('click', function(){
if(s > 0){
s--;
sliders();
}
});
body{
padding: 0;
margin: 0;
box-sizing: border-box;
background: #f4f4f4;
}
#container-slider{
width: 95%;
margin: auto;
margin-top: 1.5%;
overflow: hidden;
position: relative;
}
.slider{
background: black;
display: flex;
position: relative;
transition: all 2s;
left: 0;
}
.slider section{
height: 300px;
margin: 5px;
}
button{
padding: 0 3%;
line-height: 2;
margin-top: 1.5%;
font-size: 1rem;
cursor: pointer;
}
#next{
float: right;
}
#prev{
float: left;
}
#left-circle,
#right-circle{
position: absolute;
top: 40%;
z-index: 30;
cursor: pointer;
font-size: 3.5vw;
}
#left-circle{
left: 0;
}
#right-circle{
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div id="container-slider">
<i class="fas fa-chevron-circle-left" id="left-circle"></i>
<i class="fas fa-chevron-circle-right" id="right-circle"></i>
<div class="slider">
<section style="background: red;"></section>
<section style="background: darkblue;"></section>
<section style="background: darkgreen;"></section>
<section style="background: darkgray;"></section>
<section style="background: yellow;"></section>
<section style="background: skyblue;"></section>
<section style="background: orange;"></section>
<section style="background: purple;"></section>
<section style="background: green;"></section>
<section style="background: skyblue;"></section>
<section style="background: green;"></section>
<section style="background: white;"></section>
<section style="background: black;"></section>
<section style="background: blue;"></section>
<section style="background: brown;"></section>
</div>
<button id="next">Next</button>
<button id="prev">Prev</button>
</div>
<section>
<h2>Titulo</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem dolor, labore assumenda expedita sequi, perferendis repudiandae ea accusantium odit quia nemo pariatur? Mollitia quod ab, esse inventore, nulla cumque neque!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
Hola a todos, tengo este slider que muestra 15 sections de varios colores, necesito ayuda para que de estos 15 section, se muestren sólo 10 aleatoriamente y se oculten los cinco faltantes, he visto en algunos posts que esto es posible con match.random()
, lo intenté pero sólo llego a mostrar un sólo section var random = Math.floor(Math.random() * number_prod); prod.hide().eq(random).show(); });
, pero no quiero que me muestre uno sólo, sino los cinco sections que se muestran. Entonces, ¿Cómo hago para mostrar diez section aleatoriamente cada vez que se refresque la página y ocultar los 5 faltantes?, gracias de antemano.