Next and Prev Arrows in Slider

Question

Next and Prev Arrows in Slider

Navigation

#1 by (3 votes)

0

I'm trying to change my image using the NEXT and PREV arrows.

HTML

<div id="imagem-galeria">
    {!! Html::image('img/quem-somos/galeria/foto-grande-1.jpg', 'Peças Colhedora de Cana', ['class' => 'img-main']) !!}
    {!! Html::image('img/quem-somos/seta-direita.png', 'Seta Direita', ['class' => 'seta-direita'] ) !!}
    {!! Html::image('img/quem-somos/seta-esquerda.png', 'Seta Esquerda', ['class' => 'seta-esquerda'] ) !!}
</div>

<div class="owl-carousel-galeria">
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-1.jpg', 'Foto 1') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-2.jpg', 'Foto 2') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-3.jpg', 'Foto 3') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-4.jpg', 'Foto 4') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-5.jpg', 'Foto 5') !!}</div>
    <div class="item change-image"><div class="square"></div> {!! Html::image('img/quem-somos/galeria/torcane-foto-thumb-6.jpg', 'Foto 6') !!}</div>
</div>

jQuery

// Próxima Imagem
$('.seta-direita').on(clickDeviceEvent, function(){
    var imgAtual    = $('.img-main').attr('src');

    // Continuação...
});

The .img-main element is where the main picture goes.

I tried to use next() and prev() of jQuery , but I could not.
What is the way to do this?

Solution

jQuery

    var fotos   = new Array();
    fotos[0]    = "foto-grande-1.jpg";
    fotos[1]    = "foto-grande-2.jpg";
    fotos[2]    = "foto-grande-3.jpg";
    fotos[3]    = "foto-grande-4.jpg";
    fotos[4]    = "foto-grande-5.jpg";
    fotos[5]    = "foto-grande-6.jpg";

    // Próxima Imagem
    $('.seta-direita').on(clickDeviceEvent, function(){
        var imgAtual    = $('.img-main');
        fotoAtual       = fotoAtual + 1;

        if(fotoAtual == 6) 
            fotoAtual = 0;

        imgAtual.attr('src', urlBase + '/img/quem-somos/galeria/' + fotos[fotoAtual]);
    });

    // Anterior Imagem
    $('.seta-esquerda').on(clickDeviceEvent, function(){
        var imgAtual    = $('.img-main');
        fotoAtual       = fotoAtual - 1;

        if(fotoAtual < 0) 
            fotoAtual = 5;

        imgAtual.attr('src', urlBase + '/img/quem-somos/galeria/' + fotos[fotoAtual]);
    });

Or

var urlsImgs = $.map($(".owl-carousel-galeria").find('img'), function(obj,
    return $(obj).attr('src').replace('thumb', 'grande');
});

// Próxima Imagem
$('.seta-direita').on(clickDeviceEvent, function(){
    var imgAtual    = $('.img-main');
    fotoAtual++;

    if(fotoAtual >= urlsImgs.length) {
        fotoAtual = 0;
    }
    imgAtual.attr('src', urlsImgs[fotoAtual]);
});

// Próxima Imagem
$('.seta-esquerda').on(clickDeviceEvent, function(){
    var imgAtual    = $('.img-main');
    fotoAtual--;

    if(fotoAtual < 0) {
        fotoAtual = (urlsImgs.length - 1);
    }
    imgAtual.attr('src', urlsImgs[fotoAtual]);
});

By Erick Gallani

html jquery

asked by anonymous 22.09.2015 / 14:28

1 answer

Put a value inside the 'val' of jquery [closed] is_numeric does not work with decimal separator,

score 3 · Accepted Answer

Diego.

I imagine the problem to be as follows.

Doing this

var imgAtual = $('.img-main').attr('src');

You are getting the source of the image being displayed and assigning it to a variable and ending point, nothing else.

In fact you have to change the source of the main image, doing so.

$('.img-main').attr('src', urlDaImagem);

In the click event.

The ideal thing was when the DOM of the page load store all the references of the images inside the div owl-carousel-gallery in an array and then change the image in the next and prev of the img -main by clicking on their events.

Type like this.

$('.seta-direita').on(clickDeviceEvent, function(){
    $('.img-main').attr('src', refsImgs[indexAtual]);
});

Where refsImgs are all image URLs and indexAtual a global variable storing the current index of your carousel.

Cool!

I'll give you a suggested implementation here, less static and more dynamic.

var indexAtual = 0;

        $(document).ready(function(){

            var urlsImgs = $.map($(".owl-carousel-galeria").find('img'), function(obj, index) { return $(obj).attr('src') });

            $('.seta-direita').on('click', function(){

                indexAtual++;

                if(indexAtual >= urlsImgs.length) {
                    indexAtual = 0; //se chegou ao final do array, volta para o primeiro item
                }

                $('.img-main').attr('src', urlsImgs[indexAtual]);
            });

            $('.seta-esquerda').on('click', function(){

                indexAtual--;

                if(indexAtual < 0) {
                    indexAtual = (urlsImgs.length - 1); //se chegou ao começo do array, volta para o úlitmo item
                }

                $('.img-main').attr('src', urlsImgs[indexAtual]);
            });
        });

link