Next and Prev Arrows in Slider

Asked

Viewed 2,029 times

0

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

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 element .img-main is where the main photo goes.

I tried to use the next() and the prev() of jQuery, but I couldn’t.
What’s the way to do it ?

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]);
});

For Erick Gallani

jquery html

  • Your code is too superficial. The element .img-main is the image that displays the current slide probably ? Because then grab the src and not the target image? What this template {!! .. !!} generates, elements img ? I don’t know this template, there’s no tag for it either. I could post the generated code, maybe it would be easier for us. If they are generated img would have no way of using next() and prev(). And what is imgAtual, some other code reads this variable ?

  • What jquery component is using? $('.img-main') is the container where the main image should be changing?

  • @Erickgallani, exactly. I edited my post explaining this.

  • see if this can help you http://jsfiddle.net/8WTer/

  • @Dontvotemedown, the element .img-main is the main photo. Click on the slider photo and show in the main is already being done. But I want to do with arrows too. I am using Laravel 5, did not put the tag why my need has nothing to do with Laravel.

  • @Thiagofriedman, nice... but have to download Cycle. My last alternative is to use a plugin.

  • I get it, it’s just that I don’t know that syntax so if I had the tag I would search and understand, because I can’t tell if it’s server-side or not. Or, as I said if you post with the final code, the one generated by this template would solve it too. But ok.

  • The syntax only assembles the <img>. Not to write <img src=...> i do {!! HTML::image('caminho') !!}. And so it goes...

  • I noticed that you added the solution in the question itself and accepted another as the best answer. Could you edit and add the solution as an answer? Don’t misunderstand me, I just think it would be better as an answer.

  • I couldn’t. Att, Diego.

Show 5 more comments

2 answers

5


Diego.

I imagine the problem is this.

Doing so 

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

You are taking the source of the image being displayed and assigning it to a variable and end point, nothing more.

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

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

In the click event.

The ideal was when the page DOM load store all the image references within the div Owl-Carousel-gallery in an array and then change the image in the next and previous img-main by clicking on the respective events.

Kind of.

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

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

Nice that you got!

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]);
            });
        });

http://jsfiddle.net/aykoga40/

  • Bro, that’s the code I started, not the ending. I got the src from the main photo to make the replacement...

  • 1

    Okay, I can understand your problem. Look at my last issue of the answer. If you need more help with the code, we can help you.

  • So Mano ! I did it using your logic. That’s why I asked: what is the way to do it ? And you gave the way and not the solution ready. Really understood my question. Thank you. I will post in my question the solution.

  • @Diegosouza perfeito. I gave an implementation suggestion in my reply. Thanks =D

  • What that line does ? var urlsImgs = $.map($(".owl-carousel-galeria").find('img'), function(obj, index) { return $(obj).attr('src') });, places in a Array ?

  • Maps all imgs within the div that contain the Owl-Carousel-gallery class and generates an array of all img Urls. So you can add and remove the div imgs as you like without worrying about changing the array in hand by adding or taking some image from your carousel. More Infos in http://api.jquery.com/jquery.map/

  • Okay, I did it this way, it will really be easier in the future if I want to increase or decrease. I just had to give a replace at the moment that will put the photo in the main, why the images that are in the .owl-carousel-galeria are thumbnails, IE, the name is different.

  • 1

    @Perfect Diegosouza. Thus you increase the maintainability of your application.

  • I can give the replace in function, right ? No return ? Yeah, it worked out.

  • 1

    You can. It gets better

Show 5 more comments

0

to solve add the css:

 .slick-prev:before,
    .slick-next:before {
      color: black !important;
    }

If the classes have changed, just enter the Slick folder and check the index.html file that has the examples, and you can see the name of the arrow classes.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.