Back to Blog

Tiny Slider Code Snippets

May 17, 2022 Updated: May 17, 2022

Target Center Slide

.tns-item:not(.tns-slide-active) + .tns-slide-active + .tns-slide-active { opacity: 1; }
slider.events.on("transitionEnd", function(info) {
  info.slideItems[info.indexCached].classList.remove(
    "your-class-here"
  );

  info.slideItems[info.index].classList.add(
    "your-class-here"
  );
});
.container .tns-item {
  opacity: .2;
}
.container .tns-item:not(.tns-slide-active) + .tns-slide-active + .tns-slide-active { 
  opacity: 1; 
}
Contact

Got A Question For Me?

Feel free to ask anything directly on call or fill the form and I will contact back within few hours.