88 lines
2.8 KiB
PHP
88 lines
2.8 KiB
PHP
<div class="ui container" id="clientes">
|
|
<div class="ui center aligned large header">
|
|
CLIENTES
|
|
</div>
|
|
<div class="ui grid">
|
|
<div class="two column row">
|
|
<div class="left alined column ci">
|
|
<i class="left chevron big icon" id="left_arrow"></i>
|
|
</div>
|
|
<div class="right aligned column ci">
|
|
<i class="right chevron big icon" id="right_arrow"></i>
|
|
</div>
|
|
</div>
|
|
<div class="one column row">
|
|
<div class="column">
|
|
<div class="ui center aligned grid" id="img_clientes">
|
|
<div class="row">
|
|
@for ($i = 0; $i < min(12, count($clientes)); $i += 2)
|
|
<div class="five wide tablet two wide computer column">
|
|
{!!$clientes[$i]!!}
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
<div class="row">
|
|
@for ($i = 1; $i < min(12, count($clientes)); $i += 2)
|
|
<div class="five wide tablet two wide computer column">
|
|
{!!$clientes[$i]!!}
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
var clientes = [
|
|
@foreach ($clientes as $cliente)
|
|
'{!!$cliente!!}',
|
|
@endforeach
|
|
]
|
|
var current = 0
|
|
var rows = 2
|
|
var cols = 6
|
|
function decreaseClientes() {
|
|
$('#img_clientes').find('.row').find('.column:last-child').remove()
|
|
current -= rows
|
|
if (current < - cols * rows) {
|
|
current = clientes.length - (cols - 1) * rows
|
|
}
|
|
n = current
|
|
if (n < 0) {
|
|
n = clientes.length + n
|
|
}
|
|
$('#img_clientes').find('.row:first-child').prepend(
|
|
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n])
|
|
)
|
|
$('#img_clientes').find('.row:last-child').prepend(
|
|
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n + 1])
|
|
)
|
|
}
|
|
function increaseClientes() {
|
|
$('#img_clientes').find('.row').find('.column:first-child').remove()
|
|
current += 2
|
|
if (current > clientes.length - cols * rows) {
|
|
current = - (cols - 1) * rows
|
|
}
|
|
$('#img_clientes').find('.row:first-child').append(
|
|
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + (cols - 1) * rows])
|
|
)
|
|
$('#img_clientes').find('.row:last-child').append(
|
|
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + cols * rows - 1])
|
|
)
|
|
}
|
|
$(document).ready(function() {
|
|
$('.ci .icon').css('cursor', 'pointer').click(function() {
|
|
if ($(this).attr('class').indexOf('left') != -1) {
|
|
decreaseClientes()
|
|
return
|
|
}
|
|
increaseClientes()
|
|
})
|
|
})
|
|
</script>
|
|
@endpush
|