X-Cart forums

[tstone]

How can I change the banner/carousel/slider (whatever it's called) to fade instead of slide on xc5.2.23 Noblesse single collumn? Sorry if this is a repeat, but several searches did not return anything.

[totaltec]

Never tried it before! Thanks for the suggestion.

So the first step is to override skins/default/en/banner_rotation/body.tpl

CHANGE:

<div id="banner-rotation-widget" class="carousel slide banner-carousel">

TO:

<div id="banner-rotation-widget" class="carousel carousel-fade banner-carousel">

Then you need to add this CSS:

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}

.carousel-fade .carousel-inner .item:first-child {
  position: relative;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

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

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

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

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

[tstone]

Thanks, I'll give that a shot and see how it works. [edit] Just tried it and it works like a charm. I'll have to experiment with some of the settings to change speed etc. [edit 2] Any idea what to add (or remove) for a slower, crossfade? I checked the references above and I couldn't discern who was correct and who was not as none of the crossfades worked for me.

[Ezekush]

Great topic but i would like to ask, where do you add this CSS code given above? Anyone knows?

[totaltec]

Originally Posted by Ezekush

Great topic but i would like to ask, where do you add this CSS code given above? Anyone knows?

The proper place to add the code would be in your own module's CSS. When we build sites with X-Cart 5, or just modify an existing client site, we build them a module specific for their business. So if the site is 123cars.com we will build a 123cars module and use it to contain all of the customizations that make that site unique.

Another place it could be added would be in the custom CSS section of Look and Feel in the admin. But this is amateur hour if you are customizing the site that way. It feels too transient for me.

[totaltec]

Originally Posted by tstone

Thanks, I'll give that a shot and see how it works. [edit] Just tried it and it works like a charm. I'll have to experiment with some of the settings to change speed etc. [edit 2] Any idea what to add (or remove) for a slower, crossfade? I checked the references above and I couldn't discern who was correct and who was not as none of the crossfades worked for me.

Changing speed... need to adjust the transition.

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}

See the bolded line in the code above?

transition-property just defines what property to apply a transition to.

You could define it like this:
transition: opacity 3s ease;

The first declaration tells what to transition, opacity, the second determines the speed in seconds, the third determines what type of animation curve to apply.

[tstone]

Thanks for the update and instructions for changing the fade speed. I thought that might be the place to do it. Oh, and also thanks for reminding me that I'm an amateur, as the Custom CSS is exactly where I placed the code. hee hee