0

I've got the carousel (I think it made of bootstrap) which I derived from the template from themeforest. It works well until I want to make it autoplay. I tried set interval:1000 but it still not work. Here is the script:

function InitPropertyCarousel() {
    if ($('.carousel.property .content li img').length !== 0) {
        $('.carousel.property .content li img').on({
            click: function(e) {
                var src = $(this).attr('src');
                var img = $(this).closest('.carousel.property').find('.preview img');
                img.attr('src', src);
                $('.carousel.property .content li').each(function() {
                    $(this).removeClass('active');
                });
                $(this).closest('li').addClass('active');
            }
        });
    }
}

This is the example link : http://preview.byaviators.com/template/realia/detail.html. (I tried put this code on jsfiddle but it's not working.)

Wilf
  • 2,297
  • 5
  • 38
  • 82

1 Answers1

1

I think you are using this carousel carouFredSell. And the real initialize code is this:

function InitCarousel() {
if ($('#main .carousel .content ul').length !== 0) {
    $('#main .carousel .content ul').carouFredSel({
        scroll: {
            items: 1
        },
        auto: false,
        next: {
            button: '#main .carousel-next',
            key: 'right'
        },
        prev: {
            button: '#main .carousel-prev',
            key: 'left'
        },
        //try if this fires after slide event ends
        onAfter: function () {
            var src = $(this).find('img').attr('src');
            var img = $(this).closest('.carousel.property').find('.preview img');
            img.attr('src', src);
            $('.carousel.property .content li').each(function() {
                $(this).removeClass('active');
            });
            $(this).closest('li').addClass('active');
        }
    });
}

if ($('.carousel-wrapper .content ul').length !== 0) {
    $('.carousel-wrapper .content ul').carouFredSel({
        scroll: {
            items: 1
        },
        auto: false,
        next: {
            button: '.carousel-wrapper .carousel-next',
            key: 'right'
        },
        prev: {
            button: '.carousel-wrapper .carousel-prev',
            key: 'left'
        }
    });
}
}

There you have option auto:false, try to set it to 'true`. And if this is the slider you use, you can check ths documentation from the link above.

pgk
  • 1,437
  • 1
  • 21
  • 20
  • Thanks for the clue, I hope it could show me some function or plugin name. So I can guess what is it. But it is not `carouFredSell` :( – Wilf Jan 25 '16 at 10:19
  • 1
    Because in js folder in your theme you have this file `carousel.js`, and from there I found that this is `carouFredSell`. And then in `realia.js` this function `InitCarousel()` is called, and in this function, as far as I can see, these `ul` are selected. Because of that I decided, that this is proper function and proper carousel :(. – pgk Jan 25 '16 at 10:28
  • What if you set `auto: false` on both ? – pgk Jan 25 '16 at 10:29
  • Yes, there is a `carouFred` function in the `realia.js`. But the function I'm talking about is `InitPropertyCarousel` not `InitCarousel`. As the example I show above. I can't see that function so I think it's not `carouFred`, please correct me if I'm wrong. – Wilf Jan 25 '16 at 16:24
  • 1
    This function `InitPropertyCarousel` binds `click` event to your images on the bottom carousel, this with 5 images, and after click to image in him, changes image in the big one. If you want,try to comment this function and, if you do this, then you should not be able to click over image on the bottom carousel. Then you can try to put some `console.log()` into `InitCarousel` function to be sure that it runs. And then you can also comment `InitCarousel` to check if your carousels were initialized. If no - this is init function, otherwise, try to `console` from all functions to check which runs. – pgk Jan 25 '16 at 16:39
  • 1
    Also you have `class="caroufredsel_wrapper"` on the `div` before `ul` element. You have some `.prise_slider` which uses bootstrap slider function. As proposal, you can comment all functions in `realia.js` file and uncomment them one by one, reload the site, to find just the one you need :) – pgk Jan 25 '16 at 16:50
  • You are right! Now the carousel is scrolling but the main picture is still. Because it is only changed by click function only. How do I sync the thumbnail with the main photo? – Wilf Jan 25 '16 at 17:25
  • 1
    I updated my answer by adding some extra code (onAfter callback) to first carousel,but you can try with both,to see where to put it.I can't be more specific,and I'm not 100% sure in exact semantic without playing with real code,but the point is that you must find proper way to add function which must execute on 'onAfter' event.I think that this must be OK, but if not, check the documentation.If you still have problems, create somewhere live `fiddle`,and send me a link to it here or in chat, and I will try to help you :) – pgk Jan 25 '16 at 20:39
  • Well, it's not working, By the way, thank you for all of your efforts. I appreciate it. I just leave it as it was and telling myself to check very well before buying an old template next time. – Wilf Jan 26 '16 at 02:11