Debut Theme - Lock text on slideshow so it does not change with each slide

WHDesign
New Member
1 0 0

I have set up the slide show with 3 slides and text over them. I want it to be the same text and not change. Is there a way to lock the text so it doesn't fade on / off with the change of the images?

Replies 2 (2)
Kyoshi
New Member
1 0 0

Funny enough I am having almost the opposite problem. I added sub heading text but it wont change between slides. I'm not exactly sure on the debut theme but on the Venture theme it is on the code under sections.slideshow.liquid. in the file there is a line of code that says <div class="hero-content__title-wrapper">Which calls TO the theme.js file. If you put a number after the title like <div class="hero-content__title1-wrapper"> it has breaks the call to on the js to make it move so it stays stationary. Hopefully someone on your theme has more insight. 

AlexP77
Tourist
8 0 5

I got it working by excluding some parts of the code as comments with /* */.

 

Search for "Slide text" in your theme.css and comment out the parts as I did.

 

/*================ Slide text ================*/
.slideshow__text-wrap {
  height: 100%;
  position: relative; }
  .slideshow__link .slideshow__text-wrap {
    cursor: inherit; }

.slideshow__text-wrap--mobile {
  display: none; }
  @media only screen and (max-width: 749px) {
    .slideshow__text-wrap--mobile {
      display: block;
      position: relative;
      top: -1.1rem;
      background-color: var(--color-bg);
      width: 85%;
      margin: 0 0 -1.1rem 7.5%;
      z-index: 8; } }

/*@media only screen and (min-width: 750px) {
  .slideshow__text-content {
    opacity: 0;
    transition: 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
    transition-delay: 0.3s; } }*/

.slideshow__text-wrap--desktop .slideshow__text-content {
  position: absolute;
  width: 100%;
  top: 50%;
  z-index: 2; }

/*@media only screen and (min-width: 750px) {
  .slideshow__text-content.slideshow__text-content--vertical-top {
    top: 120px; }
  .slideshow__text-content.slideshow__text-content--vertical-bottom {
    top: auto;
    bottom: 40px; } }

.slideshow__slide--active .slideshow__text-content,
.no-js .slideshow__text-content {
  -ms-transform: translateY(-40px);
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  opacity: 1; }

.slideshow__slide--active .slideshow__text-content.slideshow__text-content--vertical-center,
.no-js .slideshow__text-content.slideshow__text-content--vertical-center {
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.no-js .slideshow__text-content::after {
  opacity: 0;
  visibility: hidden;
  content: none; }*/

.slideshow__text-content--mobile {
  display: none;
  padding-top: 2.6rem; }
  .slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
    padding-top: 1.7rem; }
    @media only screen and (min-width: 750px) {
      .slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
        padding-top: 0; } }
  @media only screen and (min-width: 750px) {
    .slideshow__text-content--mobile {
      padding-top: 0; }
      .slideshow__text-content--mobile::after {
        display: none; } }

.slideshow__text-content--mobile-active {
  display: block; }

.slideshow__title,
.slideshow__subtitle {
  color: var(--color-overlay-title-text); }
  @media only screen and (max-width: 749px) {
    .slideshow__title,
    .slideshow__subtitle {
      display: none; } }

.slideshow__title--mobile {
  margin-bottom: 0; }
  .slideshow__title--mobile ~ .slideshow__subtitle--mobile {
    margin-top: 0.5rem; }

.slideshow__subtitle--mobile,
.slideshow__title--mobile {
  display: none;
  color: var(--color-text); }
  @media only screen and (max-width: 749px) {
    .slideshow__subtitle--mobile,
    .slideshow__title--mobile {
      display: block; } }

.slideshow__btn-wrapper {
  border: none;
  background-color: transparent; }

/*@media only screen and (min-width: 750px) {
  .slideshow__btn-wrapper--push {
    margin-top: 30px; } }

.slideshow__btn {
  max-width: 100%;
  display: inline-block;
  word-wrap: break-word;
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  min-height: 3.125rem;
  line-height: 2.2; }
  @media only screen and (max-width: 749px) {
    .slideshow__btn {
      display: none; } }

.slideshow__btn--mobile {
  display: none;
  margin: 1.3rem auto 0; }
  @media only screen and (max-width: 749px) {
    .slideshow__btn--mobile {
      display: inline-block;
      margin: 2rem auto 0.3rem; } }*/