Home Forums Art WordPress Theme Art theme BM Slider Customization

This topic contains 10 replies, has 3 voices, and was last updated by  LaraMinerva 8 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #17625

    mikereyes
    Participant
    Purchased

    Hi!

    Is there a way for me to change the slider duration and to make it dissolve rather than swipe? I’d also like for it to not show the next and previous slider photos when hovering over the left and right edges of the slider.

    Thanks!

    #17627

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,
    To edit the slider duration :
    Please find this file(Appearance>Editor): /wp-content/themes/art-theme/js/custom.theme.js
    Add the codes here https://drive.google.com/open?id=1JqwtPdFDJxT9ZqrYgdieJ8RvV44i4xJU:
    autoplayTimeout:1000,
    Refer: https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html
    1000 = 1s

    I don’t understand “to make it dissolve rather than swipe”, please give more tips.
    Please paste the custom css code to “Appearance > Customize : Additional CSS”:
    To not show the next and previous slider photos

    .bm-slider-next, .bm-slider-prev { 
        pointer-events: none;
    }

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #17629

    mikereyes
    Participant
    Purchased

    Thanks for the reply! Loving the Theme!

    What I mean’t by “Dissolve” was having the images on the slider Fade-in

    #17635

    SeaTheme
    Keymaster
    Purchased
    Supported

    Please find this file(Plugins>Editor): /wp-content/plugins/bm-slider-art/bm-slider.php
    line 339, update to:
    <div class="owl-carousel <?php echo sanitize_html_class($bmslider_height_class); ?>" data-animateout="fadeOut" data-animatein="fadeIn" data-auto="<?php echo esc_attr($bm_autoplay); ?>" data-item="<?php echo esc_attr($item); ?>" data-center="<?php echo esc_attr($center); ?>" data-margin="<?php echo esc_attr($margin); ?>" data-autowidth="<?php echo esc_attr($autowidth); ?>" data-slideby="1" data-showdot="<?php echo esc_attr($showdot); ?>" data-nav="false" data-loop="true" data-idel="<?php echo esc_attr($bmslider_show_hide_navi_idel); ?>" data-idellogo="<?php echo esc_attr($bmslider_show_hide_logo_idel); ?>">

    #17659

    mikereyes
    Participant
    Purchased

    Amazing! thank you!!

    Is there a way for me to change the speed of the fadeIn and fadeOut?

    #17667

    SeaTheme
    Keymaster
    Purchased
    Supported

    Welcome.

    Please paste the custom css code to “Appearance > Customize : Additional CSS”:

    .owl-carousel .animated {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    ps: the default is 1s(second)

    #17989

    LaraMinerva
    Participant
    Purchased

    I also tried to update the line 339 with the suggested code. For some reason it didn’t work for me. the slider looks the same as before without a fade in and fade out. Do you have an idea what might cause this?

    https://www.laraminerva.com/index.php/ux-portfolio/romantic-sensuality/

    #17992

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    This solution is for BM Slider, it will not work for “Slider template” of a single portfolio.

    Regards

    #17995

    LaraMinerva
    Participant
    Purchased

    Ah I see! Thank you.

    Would it be possible to find a solution for the slider that i am using?
    I would love a slider like this one: http://kelvinbugler.com
    The slider i am using now (under the link in my other comment above) looks very similar already but the way the images change is very distracting. I would prefer a fade in fade out effect, or just replacing the images without the movement if that is possible.

    #17996

    SeaTheme
    Keymaster
    Purchased
    Supported

    I didn’t test it on the slider template, you could try to do it.
    Please refer the solution of this topic.
    Edit the file /art-theme/template/single/project/slider.php
    Add the data-animateout="fadeOut" data-animatein="fadeIn" to <div class="owl-carouse...

    It needs the custom CSS also.

    #17999

    LaraMinerva
    Participant
    Purchased

    Awesome it worked and I absolutely love it. Thank you so much!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!