Login | Sign up | Toll-Free: 1-800-752-0455
 
 

Forum

 

2 posts by 1 authors in: Forums > CMS Builder
Last Post: July 2, 2017

By Zicky - July 2, 2017 - edited: July 2, 2017

I'm stumped on this... I'm sure it's probably simple, but I can't seem to get this figured out.

Here's what I'm trying to do. I have some javascript for a slideshow on a product details page that I want to disable the next and prev selectors on if only one image has been uploaded. If more than one image has been uploaded for the product, then the next and prev selector needs to appear. Below is my code

<script type="text/javascript">
$(function() {
        $('.bx-wrapper').bxSlider({
            auto: false,
            adaptiveHeight: true,
            pager: false,
                <?php if ($productsRecord['uploads'] > 1):  ?>
            autoControls: false,
            captions: false,
            nextSelector: '.slider-next',
            prevSelector: '.slider-prev',
            nextText: '<i class="fa fa-chevron-circle-right"></i>',
            prevText: '<i class="fa fa-chevron-circle-left"></i>',
                <?php endif; ?>
            pause: 6000,
            autoHover: true,
            mode: 'fade'
        });
    });
</script>

Any help is appreciated.

Thanks, Zicky

By Zicky - July 2, 2017 - edited: July 2, 2017

Of course just as soon as I post I get it figured out.

Here's my solution if anyone finds it helpful.

<script type="text/javascript">
$(function() {
        $('.bx-wrapper').bxSlider({
            auto: false,
            adaptiveHeight: true,
            pager: false,
                <?php if (count($productsRecord['uploads']) > 1):  ?>
            autoControls: false,
            captions: false,
            //pagerCustom: '#bx-pager',
            nextSelector: '.slider-next',
            prevSelector: '.slider-prev',
            nextText: '<i class="fa fa-chevron-circle-right"></i>',
            prevText: '<i class="fa fa-chevron-circle-left"></i>',
                <?php endif; ?>
            pause: 6000, // The amount of time (in ms) between each auto transition
            autoHover: true, // Auto show will pause when mouse hovers over slider
            mode: 'fade'
        });
    });
</script>

Zicky