Replace open/close icon with text

Last updated on Sep 12, 2024

In this recipe, we will modify the Carousel plugin to replace the arrow > icon, for opening/hiding, the carousel with the text "Open Locations", making it more visible.

Preview:

CSS:

#overlay wdg-other-carousel .toggle-wrapper .mat-button-wrapper sh-icon {
  display: none; 
}

#overlay wdg-other-carousel button.carousel{
  width: 200px !important;
}

#overlay wdg-other-carousel button.toggle{
   border-radius: 4px 4px 0px 0px;
   width: 150px;
  margin-bottom: 16.5px;
  transform: rotate(0deg); 
}

#overlay wdg-other-carousel .toggle-wrapper .mat-button-wrapper::after {
    content: 'Open Locations';
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    font-size: 16px; 
    font-weight: bold;
    color: #213a8f; 
}