Joomla Templates Club 406,261 posts

[Riccardo Atzeni Friend Riccardo AtzeniJoin date: February 2012Posts: 12Downloads:8Uploads:1 Thanks: 4 Thanked: 1 times in 1 posts]

#815056

Hi guys

how can i use fade in/out effect on ACM Slideshow instead of classic slider?

thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#817947

Hi @rickvandick,

Let me check further on this and will get back to you

[Riccardo Atzeni Friend Riccardo AtzeniJoin date: February 2012Posts: 12Downloads:8Uploads:1 Thanks: 4 Thanked: 1 times in 1 posts]

#818362

Hi Saguaros,

let me know when you have good news 😉

thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#830526

Hi rickvandick,

This took time as it requires customization in code. Here is my tweak:

• I assume that you’re using ACM – Slideshow Style 2 so you open the file: /root/templates/uber/acm/slideshow/tmpl/style-2.php

• Add class ‘carousel-fade’ like this:

  <div class="acm-slideshow container">
  <div id="acm-slideshow-<?php echo $module->id; ?>" class="carousel slide carousel-fade" data-ride="carousel">
  <?php $count = $helper->getRows('data-s2.img') ?>
    <!-- Indicators -->

• Then go to file: root/templates/uber/css/custom.css (create this file if it doesn’t exist) and add this css rule:
  .carousel-fade {
  .carousel-inner {
  .item {
  opacity: 0;
  transition-property: opacity;
  }

.active {
opacity: 1;
}

.active.left,
.active.right {
left: 0;
opacity: 0;
z-index: 1;
}

.next.left,
.prev.right {
opacity: 1;
}
}

.carousel-control {
z-index: 2;
}
}

I attach these 2 files so you can take a look.

Merry X-mas!!!

---

Attachments:

1. acm-slideshow-fade.zip

[Riccardo Atzeni Friend Riccardo AtzeniJoin date: February 2012Posts: 12Downloads:8Uploads:1 Thanks: 4 Thanked: 1 times in 1 posts]

#835057

Thank you very much @saguaros, it’s exactly what i was looking for!
Very helpful!

Last details: if i want to modify the speed of the slideshow?
What file i need to customize?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#835754

Hi @rickvandick,

In above div which you add ‘carousel-fade’ class, you can add ‘data-interval’ attribute eg:

<div id="acm-slideshow-<?php echo $module->id; ?>" class="carousel slide carousel-fade" data-ride="carousel" data-interval="10000">

//interval is in milliseconds so 10000 = 10 seconds

Happy Holidays!!!

[Author]

Posts