Question 243130 in Html Question posted in
Some basic documentation can be found here.

Html – javascript – Add url link to carousel text

I have a carousel text and I try to add the URL link to each of the texts,
but on click on the text, the link does not work.
I would like someone to help me!.
Thanks.

Example:

<a target="_blank" href="http://www.google.com"><h1 class="carousel__text">Text #1</h1></a>

const carousel = document.querySelector('.carousel');
const textCount = carousel.querySelectorAll('.carousel__text').length;

let index = 1;
setInterval(() => {
  index = index === 1 ? textCount : index - 1;
  carousel.dataset.index = index;
}, 2000);
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel {
  position: relative;
  width: 100%;
  height: 4em;
  opacity:0.6;
  margin-bottom:-10px;
}
.carousel .carousel__text {
  position: absolute;
  top: 0%;
  left: 50%;
  margin: 0;
  padding: 0;
  /*color: var(--color);
  font-size: 3em;*/
  opacity: 0;
  transition: all 1s;
}
.carousel[data-index="1"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="1"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="1"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="1"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="1"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="1"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="2"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="2"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="2"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="3"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="3"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="3"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="3"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="3"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="3"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="4"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="4"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="4"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="5"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="5"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="5"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="6"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="6"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="6"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="6"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="6"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="6"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="carousel" data-index="1">
    <a target="_blank" href="http://www.google.com"><h1 class="carousel__text">Text #1</h1></a>
    <h1 class="carousel__text">Text #2</h1>
    <h1 class="carousel__text">Text #3</h1>
    <h1 class="carousel__text">Text #4</h1>
    <h1 class="carousel__text">Text #5</h1>
    <h1 class="carousel__text">Text #6</h1>
  </div>
</div>
Tags:

2

Answers


  1. 0

    The issue was with the overlapping text. opacity property only help in make the element disappear but the text still exist over screen in transparent state. So what I did is I added CSS display property which solve this issue. You may Refer this code.

    const carousel = document.querySelector('.carousel');
const textCount = carousel.querySelectorAll('.carousel__text').length;

let index = 1;
setInterval(() => {
  index = index === 1 ? textCount : index - 1;
  carousel.dataset.index = index;
}, 2000);
    .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel {
  position: relative;
  width: 100%;
  height: 4em;
  opacity:0.6;
  margin-bottom:-10px;
}
.carousel .carousel__text {
  position: absolute;
  top: 0%;
  left: 50%;
  margin: 0;
  padding: 0;
  /*color: var(--color);
  font-size: 3em;*/
  opacity: 0;
  display: none;
}
.carousel[data-index="1"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;display: block;
}
.carousel[data-index="1"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="1"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="1"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="1"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="1"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="2"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="2"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="2"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;display: block;
}
.carousel[data-index="3"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="3"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="3"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="3"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="3"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;display: block;
}
.carousel[data-index="3"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="4"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="4"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;display: block;
}
.carousel[data-index="4"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="5"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;display: block;
}
.carousel[data-index="5"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="5"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="6"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="6"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;display: block;
}
.carousel[data-index="6"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="6"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="6"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="6"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="carousel" data-index="1">
    <a target="_blank" href="http://www.google.com"><h1 class="carousel__text">Text #1</h1></a>
    <h1 class="carousel__text">Text #2</h1>
    <h1 class="carousel__text">Text #3</h1>
    <h1 class="carousel__text">Text #4</h1>
    <h1 class="carousel__text">Text #5</h1>
    <h1 class="carousel__text">Text #6</h1>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Another possible solution: use the pointer-events CSS property in conjunction with the carousel’s data-index attribute.

    I’d also alter the cursor CSS property, otherwise the cursor will only be updated when a user moves their mouse, rather than when the carousel changes items.

    const carousel = document.querySelector('.carousel');
const textCount = carousel.querySelectorAll('.carousel__text').length;

let index = 1;
setInterval(() => {
  index = index === 1 ? textCount : index - 1;
  carousel.dataset.index = index;
}, 2000);
    .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel {
  position: relative;
  width: 100%;
  height: 4em;
  opacity:0.6;
  margin-bottom:-10px;
}
.carousel .carousel__text {
  position: absolute;
  top: 0%;
  left: 50%;
  margin: 0;
  padding: 0;
  /*color: var(--color);
  font-size: 3em;*/
  opacity: 0;
  transition: all 1s;
  pointer-events: none;
  /* reset cursor when carousel changes */
  cursor: default; 
}

.carousel[data-index="1"] .carousel__link {
  pointer-events: auto;
  cursor: pointer;
}

.carousel[data-index="1"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="1"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="1"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="1"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="1"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="1"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="2"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="2"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="2"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="3"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="3"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="3"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="3"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="3"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="3"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="4"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="4"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="4"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="5"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="5"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="5"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="6"] .carousel__text:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="6"] .carousel__text:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="6"] .carousel__text:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="6"] .carousel__text:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="6"] .carousel__text:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="6"] .carousel__text:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="carousel" data-index="1">
    <h1 class="carousel__text carousel__link">
      <a target="_blank" href="http://www.google.com">Text #1</a>
    </h1>
    <h1 class="carousel__text">Text #2</h1>
    <h1 class="carousel__text">Text #3</h1>
    <h1 class="carousel__text">Text #4</h1>
    <h1 class="carousel__text">Text #5</h1>
    <h1 class="carousel__text">Text #6</h1>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search