Use the control buttons of CarouselXT on the simple Carousel

Hello,

I like the buttons used on de demo "Mini Frontpage Pro - Carousel XT 3" (squares that appear when you hover over the module), is it possible to use those on the regular Carousel (replacing the current navigation bar with the dots and arrows)?

I'm attaching my current settings and I currently have the following css adjustments:

.mfp_carousel_skin_card .mfp_carousel_item div {
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.1);
padding: 30px;
height: 100%;
box-sizing: border-box;
position: relative;
background-color:#fff;
border-radius: 10px;
}
.mfp_carousel_skin_card .mfp_carousel_item .mfp_thumb_pos_right img, .mfp_carousel_skin_card .mfp_carousel_item .mfp_thumb_pos_right2 img {
float: right;
margin-bottom: 1em;
margin-left: 1em;
border-radius: 10px;
}

Thanks in advane
4 years 9 months ago #1 by Ilan Schoenfeld

Please Log in or Create an account to join the conversation.

  • Posted by TemplatePlazza (5261) Offline
Hi ilansch,
The theme carousel and carouselxt both have different html structure for control button, so the style wont precisely similiar. Here are some basic css adjustment you can try to get such style and to give you some ideas. You can adjust it more as you like it
.mfp_carousel_skin_card .tns-nav {display:none}
.mfp_carousel_skin_card .tns-controls button:first-child {
    left: 0;
position:absolute;
background-color:rgba(255,255,255,0.5);
top:45%;
z-index:1;
padding:1.5em;
opacity:0;
transition: 0.25s all ease;
background-size:60% 60%;
background-position:center;
  }
 
.mfp_carousel_skin_card .tns-controls button:last-child {
    right: 0;
position:absolute;
background-color:rgba(255,255,255,0.5);
top:45%;
z-index:1;
padding:1.5em;
opacity:0;
transition: 0.25s all ease;
background-size:60% 60%;
background-position:center;
  }
 
.mfp_carousel_skin_card:hover .tns-controls button:first-child,.mfp_carousel_skin_card:hover .tns-controls button:last-child {opacity:1;
transform: scale(1.2);
  transition: 0.25s all ease;}
4 years 9 months ago #2 by TemplatePlazza

Please Log in or Create an account to join the conversation.

This is great, one detail, is ti possible to leave the title so it still shows?

I tried a few things and I can remove one of the buttons doing:
/*.mfp_carousel_skin_card .tns-nav {display:none} */
.tns-nav-active { display: none; }

but anything I tried to hide the lighter button, also hides the title.

Thanks
4 years 9 months ago #3 by Ilan Schoenfeld

Please Log in or Create an account to join the conversation.

  • Posted by TemplatePlazza (5261) Offline
Try to add !important in the end of the property value. so the code will be like this :
.mfp_carousel_skin_card .tns-nav {display:none!important}
4 years 9 months ago #4 by TemplatePlazza

Please Log in or Create an account to join the conversation.

Thanks for the suggestion but that actually hides also the title, but I found the following works fo me:
.mfp_carousel_skin_card .tns-nav > [aria-controls] {
	width: 0px;
	height: 0px;
	background: transparent;
}

Thanks for this great extension.
4 years 9 months ago #5 by Ilan Schoenfeld

Please Log in or Create an account to join the conversation.

  • Posted by TemplatePlazza (5261) Offline
Ah ok ilansch, glad it's finally resolved ;)
4 years 9 months ago #6 by TemplatePlazza

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum