Is there a way to slow down the transition between slides in the slideshow module in a fade effect? And could the percentage of the opague layer be controlled? Thanks.

    Hi patvandenbosche

    This JA ACM slideshow uses OwlCarousel 2: https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

    To slow down the transition, you can open the file:

    templates/ja_landscape/acm/slideshow/tmpl/style-owl.php

    You can see this line of code:

    autoplay: <?php echo $autoplay; ?>

    change it to:

    autoplay: <?php echo $autoplay; ?>,
      autoplayTimeout:3000

    3000 here is miliseconds, you can change to the value which suits your need.

      Thank you.

      Is there any way to change this code so an upgrade to the template doesn't override it? I'm always concerned about this.

      Also, to add the fade feature to the slideshow, do I use the css, shown in the page link you gave above, to the custom.css file?

      / .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css: /
      .fadeOut {
      -webkit-animation-name : fadeOut ;
      animation-name : fadeOut ;
      }

      I made the modification to the file as you recommended, but I still have the same problem. The transition, the time spent when one item ends to the time the next one begins, is too quick. And I would like it to do a fade sequence. Please tell me how to get this to work. If the slide is 3000, then the fade transition should be slow too. Right now it's like Wham! one to the next, but each slide shows up a long time. I'm not sure I'm making myself clear for you or not.

        patvandenbosche
        Hi
        For style you can use custom.css file and to avoid override on updates
        Place the file as below
        /templates/ja_landscape/local/acm/slideshow/tmpl/style-owl.php
        Local folder will work as override for the template file.

        Regards

          Hi patvandenbosche
          We have updated your site, please check if that meets your requirement.
          Here is what we did:
          In the file: /templates/ja_landscape/local/acm/slideshow/tmpl/style-owl.php
          We added following code:

          <script>
(function($){
  jQuery(document).ready(function($) {
    $("html[dir='ltr'] #acm-slideshow-<?php echo $module->id; ?> .owl-carousel").owlCarousel({
      addClassActive: true,
      items: 1,
      margin: 30,
      loop: true,
      nav : false,
      dots: true,
      autoplay: <?php echo $autoplay; ?>,
		autoplayTimeout:5000,
      smartSpeed: 1500
    });
    $("html[dir='rtl'] #acm-slideshow-<?php echo $module->id; ?> .owl-carousel").owlCarousel({
      addClassActive: true,
      items: 1,
      margin: 30,
      loop: true,
      nav : false,
      dots: true,
      autoplay: <?php echo $autoplay; ?>,
      rtl: true
    });
  });
})(jQuery);
</script>

          Best Regards.

            It looks much better, except there is no fade between slides. The speed is perfect now. I tried adding the following line and it didn't affect anything at all:

            transitionStyle : "fade"

            It would be nice if these types of options were available in the module so I could modify them without having to bother you with my request.

            Thanks,
            Pat

            Hi Pat,

            We updated above script with animateIn and animateOut:

            <script>
(function($){
  jQuery(document).ready(function($) {
    $("html[dir='ltr'] #acm-slideshow-<?php echo $module->id; ?> .owl-carousel").owlCarousel({
      addClassActive: true,
      items: 1,
      margin: 30,
      loop: true,
      nav : false,
      dots: true,
      animateIn: 'fadeIn',
      animateOut: 'fadeOut',
      autoplay: <?php echo $autoplay; ?>,
	  autoplayTimeout:5000,
      smartSpeed: 1500,
    });

    $("html[dir='rtl'] #acm-slideshow-<?php echo $module->id; ?> .owl-carousel").owlCarousel({
      addClassActive: true,
      items: 1,
      margin: 30,
      loop: true,
      nav : false,
      dots: true,
      autoplay: <?php echo $autoplay; ?>,
      rtl: true,
    });
  });
})(jQuery);
</script>

            The slide has fade effect now, could you clear cache and take a look?

            Ninja locked the discussion.
            Write a Reply...
            You need to Login to view replies.